+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- id="svg2"
- version="1.1"
- inkscape:version="0.48.4 r9939"
- sodipodi:docname="cours_4.svg"
- preserveAspectRatio="xMinYMin meet"
- viewBox="0 0 488 227"
- height="100%"
- width="100%">
- <defs
- id="defs4">
- <marker
- inkscape:stockid="Arrow1Mend"
- orient="auto"
- refY="0"
- refX="0"
- id="Arrow1Mend"
- style="overflow:visible">
- <path
- id="path4048"
- d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
- transform="matrix(-0.4,0,0,-0.4,-4,0)"
- inkscape:connector-curvature="0" />
- </marker>
- <marker
- inkscape:stockid="Arrow1Mstart"
- orient="auto"
- refY="0"
- refX="0"
- id="Arrow1Mstart"
- style="overflow:visible">
- <path
- id="path4045"
- d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
- transform="matrix(0.4,0,0,0.4,4,0)"
- inkscape:connector-curvature="0" />
- </marker>
- <marker
- inkscape:stockid="Arrow1Lstart"
- orient="auto"
- refY="0"
- refX="0"
- id="Arrow1Lstart"
- style="overflow:visible">
- <path
- id="path4039"
- d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
- transform="matrix(0.8,0,0,0.8,10,0)"
- inkscape:connector-curvature="0" />
- </marker>
- <marker
- inkscape:stockid="Arrow1Lend"
- orient="auto"
- refY="0"
- refX="0"
- id="Arrow1Lend"
- style="overflow:visible">
- <path
- id="path4042"
- d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
- transform="matrix(-0.8,0,0,-0.8,-10,0)"
- inkscape:connector-curvature="0" />
- </marker>
- <marker
- inkscape:stockid="Arrow1Lend"
- orient="auto"
- refY="0"
- refX="0"
- id="Arrow1Lend-0"
- style="overflow:visible">
- <path
- inkscape:connector-curvature="0"
- id="path4042-8"
- d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
- style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
- transform="matrix(-0.8,0,0,-0.8,-10,0)" />
- </marker>
- </defs>
- <sodipodi:namedview
- id="base"
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1.0"
- inkscape:pageopacity="0.0"
- inkscape:pageshadow="2"
- inkscape:zoom="1"
- inkscape:cx="35.363832"
- inkscape:cy="61.224991"
- inkscape:document-units="px"
- inkscape:current-layer="layer1"
- showgrid="true"
- fit-margin-top="0.3"
- fit-margin-right="0.3"
- fit-margin-bottom="0.3"
- fit-margin-left="0.3"
- units="pt"
- inkscape:window-width="1317"
- inkscape:window-height="744"
- inkscape:window-x="49"
- inkscape:window-y="24"
- inkscape:window-maximized="1">
- <inkscape:grid
- type="xygrid"
- id="grid3851"
- empspacing="5"
- visible="true"
- enabled="true"
- snapvisiblegridlinesonly="true"
- originx="-48.625px"
- originy="-714.565px" />
- </sodipodi:namedview>
- <metadata
- id="metadata7">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- <dc:title></dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <g
- inkscape:label="Layer 1"
- inkscape:groupmode="layer"
- id="layer1"
- transform="translate(-48.625,-111)">
- <path
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0"
- id="path6222"
- d="m 160,192.36218 c 0,0 110,70 255,0"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none" />
- <rect
- style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
- id="rect2985"
- width="100"
- height="110"
- x="50"
- y="122.36218"
- rx="5"
- ry="5.25" />
- <rect
- style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
- id="rect2987"
- width="90"
- height="39.285721"
- x="55"
- y="138.07646"
- rx="5"
- ry="5.25" />
- <path
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
- d="m 160,192.36218 c 0,0 110,70 255,0"
- id="path3853"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cc" />
- <path
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
- d="m 416.70357,171.56972 c 0,0 -110,-69.99999 -255,0"
- id="path3853-3"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cc" />
- <path
- style="fill:#d8d8d8;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
- d="m 282.26208,128.4689 c -15.52034,0 -28.93338,7.33912 -35.35367,17.99919 -0.64637,-0.0258 -1.29805,-0.0499 -1.95223,-0.0499 -21.75627,0 -39.38014,14.4159 -39.38014,32.19661 0,9.76218 5.31567,18.50189 13.71136,24.4061 3.8e-4,0.004 -3.8e-4,0.008 0,0.0125 1.54765,16.62328 18.53694,29.71611 39.27338,29.71611 6.98235,0 13.53033,-1.49682 19.21727,-4.10092 6.95058,5.03082 16.08115,8.08966 26.09582,8.08966 13.08998,0 24.68235,-5.22044 31.84576,-13.25009 1.22508,0.0938 2.46634,0.14958 3.72144,0.14958 21.75627,0 39.39539,-14.4159 39.39539,-32.19661 0,-13.70651 -10.48818,-25.40777 -25.25698,-30.05266 -6.2531,-11.0236 -19.90492,-18.67229 -35.75021,-18.67229 -0.93741,0 -1.87005,0.0346 -2.79108,0.0873 -7.06455,-8.6395 -19.10727,-14.33454 -32.77611,-14.33454 z"
- id="path3034"
- inkscape:connector-curvature="0" />
- <text
- xml:space="preserve"
- style="font-size:16px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="260"
- y="182.36218"
- id="text4503"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4505"
- x="260"
- y="182.36218">Internet</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="100"
- y="152.36218"
- id="text4507"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4509"
- x="100"
- y="152.36218">Client</tspan><tspan
- sodipodi:role="line"
- x="100"
- y="164.86218"
- id="tspan4511">(Navigateur Web)</tspan></text>
- <rect
- style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
- id="rect2985-2"
- width="108.57141"
- height="195"
- x="426.42859"
- y="112.36218"
- rx="5"
- ry="5.25" />
- <rect
- style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
- id="rect2987-8"
- width="90"
- height="39.285721"
- x="435"
- y="128.07646"
- rx="5"
- ry="5.25" />
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="480"
- y="142.36218"
- id="text4507-4"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4509-5"
- x="480"
- y="142.36218">Serveur</tspan><tspan
- sodipodi:role="line"
- x="480"
- y="154.86218"
- id="tspan4511-5">(programme)</tspan></text>
- <path
- id="path4543"
- style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0"
- d="m 530.88892,222.97799 c 0,6.90356 -21.9929,13.52857 -49.60714,13.52857 -27.61424,0 -50.39286,-6.62501 -50.39286,-13.52857 0,-6.90356 22.77862,-11.47143 50.39286,-11.47143 27.61424,0 49.60714,4.56787 49.60714,11.47143 z m -100,0 0,30 c 0.96873,5.73041 23.81743,11.57532 50.15625,11.57532 26.33882,0 46.37503,-5.8385 49.84375,-11.57532 0,-5 0,-30 0,-30"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="sssssccscc" />
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="100"
- y="202.36218"
- id="text4507-8"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4509-6"
- x="100"
- y="202.36218">Client</tspan><tspan
- sodipodi:role="line"
- x="100"
- y="214.86218"
- id="tspan4511-3">(Machine)</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="456.82117"
- y="251.13666"
- id="text4618"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4620"
- x="456.82117"
- y="251.13666">Documents</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="480"
- y="282.36218"
- id="text4507-4-3"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan4509-5-2"
- x="480"
- y="282.36218">Serveur</tspan><tspan
- sodipodi:role="line"
- x="480"
- y="294.86218"
- id="tspan4511-5-6">(machine)</tspan></text>
- <path
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
- d="m 480,172.36218 c 0,20 0,35 0,35"
- id="path4646"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cc" />
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#92b938;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Bold"
- x="470"
- y="322.36218"
- id="text5218"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan5220"
- x="470"
- y="322.36218">PHP</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="470.14297"
- y="337.36218"
- id="text5222"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan5224"
- x="470.14297"
- y="337.36218">Java</tspan></text>
- <g
- id="g5236"
- transform="translate(17.421707,1)">
- <text
- sodipodi:linespacing="125%"
- id="text5226"
- y="251.36218"
- x="82.578293"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#92b938;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Bold"
- xml:space="preserve"><tspan
- y="251.36218"
- x="82.578293"
- id="tspan5228"
- sodipodi:role="line">HTML</tspan><tspan
- id="tspan5230"
- y="263.86218"
- x="82.578293"
- sodipodi:role="line">CSS</tspan></text>
- <text
- sodipodi:linespacing="125%"
- id="text5232"
- y="272.36218"
- x="60"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- xml:space="preserve"><tspan
- y="272.36218"
- x="60"
- id="tspan5234"
- sodipodi:role="line">Javascript</tspan></text>
- </g>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="260"
- y="122.36218"
- id="text5262"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan5264"
- x="260"
- y="122.36218">Requêtes</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
- x="290"
- y="252.36218"
- id="text6026"
- sodipodi:linespacing="125%"><tspan
- sodipodi:role="line"
- id="tspan6028"
- x="290"
- y="252.36218">Réponses</tspan><tspan
- sodipodi:role="line"
- x="290"
- y="264.86218"
- id="tspan6030">(pages, images, vidéos, scripts, …)</tspan></text>
- <path
- style="fill:#000000;fill-opacity:1;stroke:none"
- d="m 153.69106,188.74964 7.20077,7.55969 2.97218,-5.21212 z"
- id="path6798-3"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccc" />
- <path
- style="fill:#000000;fill-opacity:1;stroke:none"
- d="m 422.59911,174.46563 -7.57857,-7.1809 -2.70129,5.35752 z"
- id="path6798-2"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccc" />
- <path
- style="fill:#000000;fill-opacity:1;stroke:none"
- d="m 480.06526,168.83859 -3.04557,9.98622 5.99994,0.0274 z"
- id="path6798-2-2"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccc" />
- <path
- style="fill:#000000;fill-opacity:1;stroke:none"
- d="m 480.06526,209.70337 -3.04557,-9.98622 5.99994,-0.0274 z"
- id="path6798-2-2-4"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="cccc" />
- </g>
-</svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
+++ /dev/null
-<html>
- <body>
- <form method="post" action="password2.php">
- Username: <input name="name" type="text" width="20"> </input><br/>
- Password: <input name="pass" type="password"
- width="20"></input><br/>
- <button type="submit">Connect</button>
- </form>
- </body>
-</html>
+++ /dev/null
-<html>
- <body>
- <?php
-if (isset($_POST["name"])) {
- echo "Bonjour, " . $_POST["name"];
-};
-
-?>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
->
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Systèmes d'exploitation (1/2)</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
-
- </head>
- <body>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 1</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
-
- <div class="sws-slide" >
- <h1>Contenu du cours</h1>
- <ol >
- <li > Comprendre les bases du Web
- <ul>
- <li>Fonctionnement des ordinateusr Unix (cours 1 et 2) </li>
- <li>Notions de réseau (cours 3 et 4) </li>
- </ul>
- </li>
- <li class="sws-pause" style="padding:20pt 0;" > Programmer (pour) le Web
- <ul>
- <li>Pages statiques (HTML & CSS cours 5)</li>
- <li>Pages dynamiques avec PHP (cours 6, 7 et 8)</li>
- <li>Notions de sécurité des sites Web (cours 9)</li>
- <li>Bonus (cours 10)</li>
- </ul>
- </li>
- <p>Cours disponible en ligne
- sur <a href="https://www.lri.fr/~kn/teaching_fr.html">https://www.lri.fr/~kn/teaching_fr.html</a>. Les
- supports de cours seront distribués à partir de la semaine prochaine.</p>
- </ol>
-
- </div>
- <div class="sws-slide" >
- <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
- <p>2 sessions:</p>
- <ul >
- <li > 1<sup>ère</sup> session
- <ul>
- <li> Contrôle continu (50%):
- <ul>
- <li> Partiel (fin octobre/début novembre) 25% </li>
- <li> 1 interro(s) de TP (25 %) </li>
- </ul>
- </li>
- <li> Examen (50%) </li>
- </ul>
- </li>
- <li class="sws-pause" >
- 2<sup>ème</sup> session (examen 100%)</li>
- </ul>
- <p class="sws-pause" ><b>Rappel:</b>
- <i>La défaillance fait obstacle au calcul de la moyenne
- et implique l'ajournement.
- La présence de l'étudiant étant obligatoire en TP [...], plus
- d'une absence injustiée dans un enseignement peut entraîner
- la défaillance de l'étudiant dans l'enseignement concerné
- </i>
- </p>
- </div>
-
- <div class="sws-slide" >
- <h1>Organisation</h1>
- <ul>
- <li> 10 semaines de cours :
- <ul>
- <li> 8/9, 16/9, 23/9, 30/9, 7/9, 14/9 </li>
- <li> partiel/toussaint </li>
- <li> 4/11, <em>(pas de cours le 11/11)</em>, 18/11, 25/11, 2/12</li>
- </ul>
- </li>
- <li> 10 semaines de TP :
- <ul><li>18/9, 25/9, 2/10, 9/10, 16/10</li>
- <li> partiel/toussaint</li>
- <li>6/11, 13/11, 20/11, 27/11, 4/12</li>
- </ul>
- </li>
- <li> examen début Janvier</li>
- <li> cours tous les mardi (13h30) </li>
- <li> TP le jeudi (9h) </li>
- </ul>
- </div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li> Systèmes d'exploitation
- <ul class="empty">
- <li class="hl">1.1 Principes des systèmes
- d'exploitation</li>
- <li>1.2 Système de gestion de fichiers</li>
- <li>1.3 Système de gestion de processus</li>
- </ul>
- </li>
- </ol>
- </div>
-
- <div class="sws-slide">
- <h1> Système d'exploitation </h1>
- <p>Quelques systèmes:</p>
- <ul>
- <li>Windows XP/NT/2003/7/8, …</li>
- <li>Linux, FreeBSD, NetBSD, OpenBSD, …</li>
- <li>MacOS X (basé sur une variante de FreeBSD), …</li>
- <li>Unix, AIX, Solaris, HP-UX, …</li>
- <li>Symbian OS (Nokia), iOS, Android, …</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1> Système d'exploitation </h1>
- <p>Qu'est-ce qu'un système d'exploitation ?</p>
- <ul>
- <li class="sws-pause" >c'est un <em>programme</em></li>
- <li class="sws-pause" > qui <em>organise</em> l'accès aux <em>ressources</em> de la machine</li>
- </ul>
- <p class="sws-pause"> Quelles sont les ressources d'une machine?</p>
- <ul>
- <li>Processeur (temps d'exécution)</li>
- <li>Mémoire</li>
- <li>Accès aux périphériques de stockage</li>
- <li>Accès aux périphériques d'entrées/sorties</li>
- <li>…</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1> Système d'exploitation </h1>
- <br/>
- <div style="display:inline-block;vertical-align:middle;width:19%;text-align:center;">
- Haut niveau<br/>
- <span style="font-size:6cm;">↓</span><br/>
- Bas niveau
- </div>
- <div style="display:inline-block; width:80%;vertical-align:middle;">
- <ul class="empty">
- <li><em>Applications</em>: navigateur Web, éditeur de
- texte, anti-virus, jeu, compilateur, …</li>
- <li style="margin-top:2em;" ><em><b>Système d'exploitation</b></em>:
- <ul>
- <li>Gestion des ressources</li>
- <li>Interface avec le matériel (pilotes)</li>
- </ul>
- </li>
- <li style="margin-top:2em;"><em>Matériel</em>: CPU, mémoire, périphériques, …</li>
- </ul>
- </div>
- </div>
- <div class="sws-slide centerbox">
- <h1>Le système Unix</h1>
- <table class="desc">
- <tr><td>1965</td> <td>MultICS: <i>Multiplexed Information and Computing Service</i> (Bell & MIT) </td>
- </tr>
- <tr><td>1969</td> <td>Unix: 1<sup>ère</sup> version en
- assembleur (AT&T)</td>
- </tr>
- <tr><td style="width:4em;">1972-73</td><td> Unix réécrit en C</td></tr>
- <tr><td>1976</td><td> Invention de TCP/IP</td></tr>
- <tr><td>1977</td><td> <i>Berkeley Software Distribution</i>
- (BSD)</td></tr>
- <tr><td>1985</td><td>Unix System V</td></tr>
- <tr><td>1988</td><td>Minix</td></tr>
- <tr><td>1992</td><td>Linux</td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <div class="centerbox">
- <h1>Unix : architecture</h1>
- <table style="position:relative;left:5%;width:90%;" class="rounded">
- <tr><td colspan="2" style="background:#ddf;width:100%;">
- Applications
- </td>
- </tr>
- <tr><td style="width:50%;background:#bbf;">
- Interface utilisateur
- </td>
- <td style="width:50%;background:#bbf;">
- Services
- </td>
- </tr>
- <tr><td colspan="2" style="width:100%;background:#99f;color:white;">
- Noyau (<i>kernel</i>)
- </td>
- </tr>
- <tr><td style="border-style:none;"/> <td style="background:#88f;color:white;">
- Micro-code
- </td>
- </tr>
- <tr><td colspan="2" style="width:100%;background:#77f;color:white;">
- Matériel
- </td>
- </tr>
- </table>
- </div>
- </div>
- <div class="sws-slide">
- <h1>Zoom sur le noyau</h1>
- <table style="position:relative;left:5%;width:90%;" class="rounded">
- <tr> <td style="background:#ddf;width:20%;">
- Applications
- </td>
- </tr>
- <tr><td style="width:20%; border-style:none;" />
- <td style="width:80%;background:#ddf;">
- Bibliothèques
- (<tt>libc</tt>, <tt>DirectX</tt>, <tt>OpenGL</tt>, …)
- </td>
- </tr>
- </table>
- <hr style="border-bottom: dashed 1pt #696968; width: 90%;border-top:none;" />
- <table style="position:relative;left:5%;width:90%;"
- class="rounded sws-pause">
- <tr><td style="width:100%;background:#f99;color:white;">
- Appels systèmes
- </td>
- </tr>
- <tr> <td style="background:#f66;color:white;">
- Noyau <br/>
- <div style="font-size:smaller">
- pilotes de périphériques <span style="display:inline-block;width:4em"> </span>
- ordonnanceur (gestion du temps CPU)<br/>
- gestionnaire de mémoire <span style="display:inline-block;width:4em"> </span>
- système de fichier<br/>
- </div>
- </td>
- </tr>
- <tr><td style="width:100%;background:#f33;color:white;">
- Matériel
- </td>
- </tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Le <i>Shell</i> Unix</h1>
- <ul>
- <li>Interface utilisateur <em>en mode texte</em><br/>
- L'utilisateur écrit des commandes dont le résultat est
- affiché à l'écran</li>
- <li>Interface « historique » sous Unix</li>
- <li>Expose à l'utilisateur certains concepts Unix
- (permissions, propriétaires, processus, …)</li>
- <li>Ces concepts sont importants pour pouvoir concevoir de
- sites Web</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Le <i>Shell</i> Unix</h1>
- <p>Exemple de session <i>shell</i>:</p>
- <div>
- <code>
- $ ls
- <span style="color:blue">Documents Downloads Public Person</span>
- $ cd Documents
- $ ls
- <span style="color:blue">compte_rendu.txt</span>
- $ mv compte_rendu.txt cr.txt
- $ ls
- <span style="color:blue">cr.txt</span>
- </code>
- </div>
- </div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li> Systèmes d'exploitation
- <ul class="empty">
- <li >1.1 Principes des systèmes
- d'exploitation</li>
- <li class="hl">1.2 Système de gestion de fichiers</li>
- <li>1.3 Système de gestion de processus</li>
- </ul>
- </li>
- </ol>
- </div>
- <div class="sws-slide">
- <h1>Système de gestion de fichiers (<i>filesystem</i>)</h1>
- <ul>
- <li> <em>Organise</em> les données sur le support
- physique </li>
- <li>Protège contre les <em>corruptions de données</em> </li>
- <li>Gestion optimale de l'espace disponible</li>
- <li><em>Accès efficace</em> aux données</li>
- <li><em>Abstraction</em> du support physique (DVD, mémoire
- flash, disque réseau, …)</li>
- <li>Enregistrement des <em>méta-données</em> (date de
- création, propriétaire, taille, …)</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Le concept de <em>fichier</em></h1>
- <p>
- Un fichier est une <em>collection d'infromations
- numériques</em> réunies sous un même <em>nom</em> et
- enregistrée sur un support de stockage
- </p>
- <ul>
- <li>Manipulable comme une unité</li>
- <li>Selon les systèmes, le <em>nom</em> a plus ou moins
- d'importance</li>
- <li>possède un type</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Le concept de <em>fichier</em></h1>
- <p>Ne pas confondre:</p>
- <ul>
- <li>type du fichier: il influe sur le comportement du système
- (fichier « normal », répertoire, lien (raccourcis), fichier
- système, …). C'est une méta-donnée conservée par le système
- de fichier</li>
- <li>type du contenu: le type des <em>données</em> contenues
- dans le fichier:
- <ul>
- <li>DOS puis Windows: l'extension (les 3 derniers
- caractères après le « . ») détermine le type de contenu
- </li>
- <li>MacOS puis OS X/iOS: les premiers octets du fichier
- déterminent son type
- </li>
- <li>Premiers octets ou extension, selon les interfaces
- utilisées</li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Les attributs d'un fichier</h1>
- <table class="desc">
- <tr>
- <td style="width:7em;"><em>Nom</em></td> <td/>
- </tr>
- <tr>
- <td><em>Propriétaire</em></td>
- <td>utilisateur qui possède ce fichier</td>
- </tr>
- <tr>
- <td><em>Groupe</em></td>
- <td>groupe d'utilisateurs qui possède ce fichier</td>
- </tr>
- <tr>
- <td><em>Emplacement</em></td>
- <td>localisation du fichier sur le support physique</td>
- </tr>
- <tr>
- <td><em>Taille</em></td>
- <td>en octet (peut être la taille réelle ou la taille
- occupée sur le support)</td>
- </tr>
- <tr>
- <td><em>Permissions</em></td>
- <td> « qui a quel droit » sur le fichier (lecture, écriture,
- exécution, …)
- </td>
- </tr>
- <tr>
- <td><em>Type</em></td>
- <td/>
- </tr>
- <tr>
- <td><em>Dates</em></td>
- <td>dernier accès, dernière modification, création, …</td>
- </tr>
- </table>
- </div>
-<div class="sws-slide">
-<h1>Organisation logique des fichiers</h1>
-<p> Usuellement, les fichiers sont regroupés en <em>répertoires</em>. Les
-répertoires sont imbriqués les uns dans les autres de manière a former
-une <em>arborescence</em>.
-</p>
-<p>
- <em>Sous Unix</em> il y a un répertoire racine, « <em>/</em> »
-(<i>slash</i>) qui contient toute l'arborescence du système.<br/>
-Chaque utilisateur possède aussi un répertoire personnel
-</p>
-</div>
-
-<div class="sws-slide">
-<h1>Noms de fichiers et chemins</h1>
-<p style="background:white;">
-Un chemin est une <em>liste de répertoire</em> à traverser pour
-atteindre un fichier ou répertoire donné.
-Sous Unix, le séparateur de chemin est le « <em>/</em> » <br/>
-<em>Les chemins absolus </em> commencent par un <tt>/</tt> et
- dénotent des fichiers à partir de la racine. Exemple:
- <code>
- /home/kim/Documents/ProgInternet/cours01.pdf
- </code>
-<em>Les chemins relatifs</em> dénotent des fichiers à partir du
- répertoire courant. Exemple:<br/>
-<code> Documents/ProgInternet/cours01.pdf</code>
-si on se trouve dans le répertoire <tt>/home/kim</tt>
-<br/>
-<br/>
-<em>Les noms spéciaux</em>: « . » dénote le répertoire
- courant,
- « .. » le répertoire parent, « ~ » le répertoire de
- l'utilisateur et « ~<tt>toto</tt> » le répertoire de l'utilisateur
- <tt>toto</tt>
-</p>
-</div>
-
-<div class="sws-slide">
- <h1>Utilisation du <i>Shell</i></h1>
- <p>
- Le <em>shell</em> affiche un <em>invite de commande</em>
- (<i>prompt</i>). Exemple:<br/>
- <code>kim@machine $ <span class="sws-pause" /></code><br/><br/>
- <span>On peut alors saisir une commande:</span><br/><br/>
- <code> kim@machine $ ls *.txt<span class="sws-pause"/></code><br/><br/>
- <span>Le shell affiche la <em>sortie</em> de la commande:</span><br/><br/>
- <code> fichier1.txt fichier2.txt</code><br/><br/>
- <span>Certains caractères doivent être précédés d'un « \ » (échappés):</span><br/><br/>
- <code> kim@machine $ ls mon\ fichier\#1.txt</code>
- </p>
-</div>
-<div class="sws-slide">
-<h1>La ligne de commande</h1>
-<p>
- Une ligne de commande a la forme:<br/>
- <code>prog item1 item2 item3 item4 … </code>
-</p>
- <ol>
- <li class="sws-pause"> Si <tt>prog</tt> est un chemin il doit
- dénoter <em>un fichier exécutable </em>
- </li>
- <li class="sws-pause"> Si <tt>prog</tt> est un simple nom, il doit dénoter un fichier
- exécutable se trouvant dans un des <em>répertoires prédéfinis</em>
- (<tt>/bin</tt>, <tt>/usr/bin</tt>, …)
- </li>
- <li class="sws-pause"> Pour chaque <tt>item<sub>i</sub></tt> (séparés par un ou plusieurs espaces
- non échappés) le <i>shell</i> fait une <em>expansion de nom</em>
- </li>
- <li class="sws-pause"> La liste de toutes les chaînes de caractères expansées est
- passée comme argument au programme <tt>prog</tt>
- </li>
- </ol>
-</div>
-<div class="sws-slide">
-<h1>Expansion des noms<br/>Expressions régulières glob</h1>
-<p>
- Certains caractères sont <em>interprétés</em> de manière spéciale par le
- <i>shell</i>. Ces caractères sont « expansés » selon des
- règles. Si la forme <em>expansée</em> correspond a un ou plusieurs fichiers
- existants, alors leurs noms sont placés sur la ligne de commande. Sinon
- la chaîne de caractère de départ garde sa valeur textuelle.
-</p>
-</div>
-<div class="sws-slide">
- <h1>Expressions régulières glob</h1>
- <p>Règles d'expansion:
- <tt><em>*</em></tt> n'importe quelle chaîne<br/>
- <tt><em>?</em></tt> n'importe quel caractère
- <tt><em>[ab12…]</em></tt> un caractère dans la liste <br/>
- <tt><em>[^ab12…]</em></tt> un caractère absent de liste<br/>
- <tt><em>[a-z]</em></tt> un caractère dans l'intervalle<br/>
- <tt><em>[^a-z]</em></tt> un caractère absent de l'intervalle<br/>
- <tt><em>{m<sub>1</sub>, m<sub>2</sub>}</em></tt>
- motif <tt>m<sub>1</sub></tt> ou <tt>m<sub>2</sub></tt> <br/>
- <tt><em>?(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>@(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>*(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>+(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt><br/>
- <i>k</i> motifs parmi <tt>m<sub>i</sub></tt> <br/>
- <tt><em>?</em></tt>: <tt>0 ≤ <i>k</i> ≤ 1</tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>@</em></tt>: <tt><i>k</i> = 1</tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>*</em></tt>: <tt><i>k</i> ≥ 0</tt>
- <span style="display:inline-block;width:2em" />
- <tt><em>+</em></tt>: <tt><i>k</i> ≥ 1</tt>
- <br/>
- <tt><em>!(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>:
- ni <tt>m<sub>1</sub></tt>, …, ni <tt>m<sub>n</sub></tt>
-</p>
-</div>
-<div class="sws-slide">
-<h1>Expressions régulières glob<br/>Exemples</h1>
-<p><tt><em>ls !(*[aeiouy]?)</em></tt> <span class="sws-pause">
- La chaine « <tt>!(*[aeiouy]?)</tt> » est remplacée par la liste de tous
- les fichiers dont l'avant dernière lettre du nom n'est pas une
- voyelle. S'il n'y a pas de tel fichier, la chaîne
- « <tt>!(*[aeiouy]?)</tt> » est passée à la commande <tt>ls</tt>.</span><br/><br/>
- <span>
- <tt><em>ls [0-9]*</em></tt> affiche la liste des fichiers commençant par un
- chiffre<br/><br/>
- <tt><em>ls +(abc)</em></tt> affiche la liste des fichiers dont le nom est une
- répétition de « abc ».
-</span>
-</p>
-</div>
-<div class="sws-slide">
-<h1>Commandes shell de base</h1>
-<ul class="empty">
-<li><em>cd </em><i>chemin</i>: <i>chemin</i> devient le
- répertoire courant. Si absent, utilise le répertoire personnel
-</li>
-<li><em>ls</em> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>:
- affiche le nom des <i>n</i> fichiers. Si <i>n=0</i> affiche le contenu du
- répertoire courant. Avec l'option <tt><em>-l</em></tt> affiche la liste
- détaillée.
-</li>
-<li><em>cp</em> <i>chemin<sub>1</sub></i> <i>chemin<sub>2</sub></i>:
-copie de fichier
-</li>
-<li><em>mv</em> <i>chemin<sub>1</sub></i> <i>chemin<sub>2</sub></i>:
- déplacement
- de fichier (et renommage)
-</li>
-<li><em>rm</em> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>:
- supprime les fichiers (définitif)
-</li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Droits et propriétés des fichiers</h1>
-<p>
-Sous Unix un utilisateur est identifié par son <em>login</em> (ou nom
-d'utilisateur). Chaque utilisateur est dans un <em>groupe
- principal</em>.<br/>
-Chaque fichier appartient à un utilisateur et à un groupe.<br/>
-Chaque fichier possède 3 permissions pour son propriétaire, son groupe
-et tous les autres. Les permissions sont lecture, écriture, exécution
-(plus d'autres non abordées dans ce cours).<br/>
-<table >
- <tr><th style="width:20%">Permission</th> <th style="width:40%">fichier</th> <th style="width:40%">répertoire</th> </tr>
- <tr><td><em>lecture</em> (r)</td> <td>lire le contenu du
- fichier</td>
- <td >lister le contenu du répertoire</td></tr>
-
- <tr><td style="vertical-align:top;"><em>écriture</em> (w)</td> <td style="vertical-align:top;">écrire dans le fichier</td>
- <td style="vertical-align:top;">supprimer/renommer/créer des
- fichiers dans le répertoire</td></tr>
- <tr><td style="vertical-align:top;"><em>exécution</em>
- (x)</td> <td style="vertical-align:top;">exécuter le fichier
- (si<br/>
-
- c'est un programme)</td>
- <td style="vertical-align:top;">rentrer dans le répertoire
- </td></tr>
-</table>
-<code>$ ls -l
-drwxr-x--- 9 kim prof 4096 Sep 7 21:31 Documents</code>
-</p>
-</div>
-<div class="sws-slide">
-<h1>La commande <em>chmod</em></h1>
-<code>
- chmod <i>permissions</i> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>
-</code>
-<p> modifie les permissions des fichiers <i>1</i> à <i>n</i>. La chaîne
-<i><tt>permissions</tt></i> est soit une suite de modifications de
-permissions <em>symbolique</em> soit l'ensemble des permissions données
-de manière <em>numérique</em>: <br/>
-<code>
- chmod 755 fichier.txt
- chmod u-w,a+x,g=w fichier.txt
-</code>
-</p>
-</div>
-<div class="sws-slide">
-<h1>Permissions numériques</h1>
-<p>
-On groupe les <em>bits</em> de permissions par trois puis on convertit
-en décimal:<br/>
-<table style="width:100%;text-align:center;" class="btable">
-<tr> <th colspan="3" style="width:33%"> Utilisateur </th>
- <th colspan="3" style="width:33%">
- Groupe</th>
- <th colspan="3" style="width:33%">Autres</th>
-</tr>
-<tr>
- <td>r</td> <td>w</td> <td>x</td> <td>r</td> <td>w</td> <td>x</td> <td>r</td> <td>w</td> <td>x</td>
-</tr>
-<tr>
- <td>1</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td>
-</tr>
-<tr>
-<td colspan="3"> 6 </td> <td colspan="3">
- 4</td><td colspan="3">0</td>
-</tr>
-</table>
-Le fichier est lisible et modifiable mais pas exécutable par son
-propriétaire, lisible pour le groupe. Les autres ne peuvent ni le lire
-ni le modifier.</p>
-</div>
-<div class="sws-slide">
-<h1>Permissions symboliques</h1>
-<code>
- cible modifieur permission
-</code>
-<ul class="empty">
- <li> <em>cible</em> : u (utilisateur), g (groupe), o (others), a
- (all)
- </li>
-
- <li> <em>modifieur</em> : + (autorise), - (interdit), = (laisse
- inchangé)
- </li>
-
- <li><em>permission</em> : r (lecture), w (écriture), x (exécution)</li>
-</ul>
-<p>
-Exemple:<br/>
-<code> chmod u+rw,u-x,g+r,g-wx,o-rwx fichier.txt </code>
-</p>
-</div>
-<div class="sws-slide">
- <h1>Liens symboliques (1)</h1>
-<p>Pour des raisons d'organisation, on veut pouvoir « voir » le même
- fichier ou répertoire sous deux noms différents (ou à deux endroits
- différents). Par exemple:
-</p>
-<code style="background:white">
- $ ls -l <mark>Documents/Cours</mark>
- total 8
- drwxr-xr-x 3 kim prof 4096 Sep 9 11:30 <mark>Licence</mark>
- drwxr-xr-x 3 kim prof 4096 Sep 9 11:30 <mark>Master</mark>
-
- $ cd <mark>Documents/Cours/Master</mark>; ls
- <mark>Compilation XMLProgInternet</mark>
-
- $ cd <mark>XML_Prog_Internet</mark>; ls
- <mark>cours01 cours02 cours03 cours04 cours05 cours06</mark> <mark style="color:turquoise">Prereq</mark>
-
- $ ls -l Prereq
- lrwxrwxrwx 1 kim prof 28 Sep 9 11:30 <mark style="color:turquoise">Prereq</mark> -> <mark>../../Licence/UnixProgWeb/</mark>
-</code>
-
-</div>
-<div class="sws-slide">
- <h1>Liens symboliques (2)</h1>
- <p>La commande <em><tt>ln</tt></em> permet de créer des <em>liens
- symboliques</em>. Un lien est un petit fichier qui contient
- un <em>chemin</em> vers un fichier de destination.
- </p>
- <p>Exemple d'utilisation</p>
-<code> $ ln -s ../foo/bar/baz/toto.txt rep/titi.txt
-</code>
-<p class="sws-pause">crée un lien vers le fichier <tt>toto.txt</tt>
- sous le nom <tt>titi.txt</tt> (chacun placé dans des sous/sur
- répertoires)
-</p>
-<ul>
- <li>Ouvrir/modifier le lien > ouvre/modifie la cible</li>
- <li>Supprimer le lien > supprime le lien mais pas la cible</li>
- <li>Si la cible est un répertoire, faire <tt>cd</tt> nous place «
- dans » la cible, mais le repertoire parent est celui d'où l'on vient</li>
-</ul>
-<p>Cela permet de créer l'illusion que la cible a été copiée à
- l'identique, sans les inconvénients</p>
-</div>
-<div class="sws-slide">
- <h1>À propos de la suppression</h1>
- <p>La commande <tt>rm fichier</tt> efface un fichier définitivement<br/>
- La commande <tt>rm -d rep</tt> efface un répertoire s'il est vide<br/>
- La commande <tt>rm -r rep</tt> efface un répertoire récursivement
- mais demande confirmation avant d'effacer des éléments<br/>
- La commande <tt>rm -rf rep</tt> efface un répertoire
- récursivement et sans confirmation</p>
- <p><s>Toute suppression est définitive</s></p>
- <p>Gag classique :</p>
- <code style="background:white"> $ mkdir <s>\~</s>
- ...
- $ ls
- <mark> Documents Photos Musique ~</mark>
- $ rm -rf <s>~</s>
- <mark style="font-size:200%;"> ☠ ☠ ☠ ☠ ☠ ☠</mark>
-</code>
-</div>
-<div class="sws-slide">
- <h1>Obtenir de l'aide sur une commande</h1>
- <p>La commande <em><tt>man</tt></em> permet d'obtenir de l'aide sur
- une commande. Lors qu'une page d'aide est affichée, on peut la faire
- défiler avec les touches du clavier, la quitter avec « <tt>q</tt> »
- et rechercher un mot avec la touch « <tt>/</tt> »</p>
- <code style="position:relative;left:10%;font-size:70%">
-LS(1L) Manuel de l'utilisateur Linux LS(1L)
-
-
-<FONT COLOR="#000000"><B>NOM</B></FONT>
- ls, dir, vdir - Afficher le contenu d'un répertoire.
-
-<FONT COLOR="#000000"><B>SYNOPSIS</B></FONT>
- <FONT COLOR="#000000"><B>ls</B></FONT> <FONT COLOR="#000000"><B>[options]</B></FONT> <FONT COLOR="#000000"><B>[fichier...]</B></FONT>
-
- Options POSIX : <FONT COLOR="#000000"><B>[-1acdilqrtuCFR]</B></FONT>
-
- Options GNU (forme courte) : <FONT COLOR="#000000"><B>[-1abcdfgiklmnopqrstuxABCD</B></FONT>
- <FONT COLOR="#000000"><B>FGLNQRSUX]</B></FONT> <FONT COLOR="#000000"><B>[-w</B></FONT> <FONT COLOR="#0000ff"><I>cols<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[-T</B></FONT> <FONT COLOR="#0000ff"><I>cols<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[-I</B></FONT> <FONT COLOR="#0000ff"><I>motif<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[--full-time]</B></FONT>
- <FONT COLOR="#000000"><B>[--format={long,verbose,commas,across,vertical,single-col</B></FONT>
- <FONT COLOR="#000000"><B>umn}]</B></FONT> <FONT COLOR="#000000"><B>[--sort={none,time,size,extension}]</B></FONT>
- <FONT COLOR="#000000"><B>[--time={atime,access,use,ctime,status}]</B></FONT>
- <FONT COLOR="#000000"><B>[--color[={none,auto,always}]]</B></FONT> <FONT COLOR="#000000"><B>[--help]</B></FONT> <FONT COLOR="#000000"><B>[--version]</B></FONT> <FONT COLOR="#000000"><B>[--]</B></FONT>
-
-<FONT COLOR="#000000"><B>DESCRIPTION</B></FONT>
- La commande <FONT COLOR="#000000"><B>ls</B></FONT> affiche tout d'abord l'ensemble de ses
- arguments <FONT COLOR="#0000ff"><I>fichiers</I></FONT> autres que des répertoires. Puis <FONT COLOR="#000000"><B>ls</B></FONT>
- affiche l'ensemble des fichiers contenus dans chaque
- répertoire indiqué. <FONT COLOR="#000000"><B>dir</B></FONT> et <FONT COLOR="#000000"><B>vdir</B></FONT> sont des versions de <FONT COLOR="#000000"><B>ls</B></FONT>
- affichant par défaut leurs résultats avec d'autres for
- mats.
-
-</code>
-
-</div>
-<div class="sws-slide">
- <h1>Recherche de fichiers</h1>
- <p>La commande <tt>find rep <i>criteres</i></tt> permet de trouver
- tous les fichiers se trouvant dans le répertoire <tt>rep</tt> (ou un
- sous répertoire) et répondant à certains critères. Exemples de
- critères :</p>
- <ul>
- <li> <tt>-name '*toto*'</tt> dont le nom
- contient <tt>toto</tt></li>
- <li> <tt>-size +200M</tt> dont la taille sur le disque est
- supérieure à 200 Mo</li>
- <li> <tt> <i>c<sub>1</sub></i> -a <i>c<sub>2</sub></i></tt> pour
- lesquel les critères <tt> <i>c<sub>1</sub></i></tt>
- et <tt> <i>c<sub>2</sub></i></tt> sont vrais</li>
- <li> <tt> <i>c<sub>1</sub></i> -o <i>c<sub>2</sub></i></tt> pour
- lesquel l'un au moins des critères <tt> <i>c<sub>1</sub></i></tt>
- et <tt> <i>c<sub>2</sub></i></tt> est vrais</li>
- <li> <tt>-user toto</tt> qui appartiennent à l'utilisateur <tt>toto</tt></li>
- </ul>
- <p> Comment trouver toutes les options de la commande <tt>find</tt>
- ? <span class="sws-pause"><tt><em> man find</em></tt></span></p>
-</div>
-<div class="sws-slide">
- <h1>Quelques commandes utiles</h1>
- <ul>
- <li> <tt>cat <i>fichier</i></tt> permet d'afficher le contenu d'un fichier dans
- le terminal</li>
- <li> <tt>less <i>fichier</i></tt> permet de lire le contenu d'un fichier (avec
- défilement en utilisant les flêches du clavier si le fichier est
- trop grand)</li>
- <li> <tt>sort <i>fichier</i></tt> permet d'afficher les lignes d'un fichier
- triées (on peut spécifier des options de tri)</li>
- <li> <tt>file <i>fichier</i></tt> permet de connaître le type d'un
- fichier</li>
- <li> <tt>wc <i>fichier</i></tt> permet de compter le nombre de
- caractères/mots/lignes d'un fichier</li>
- <li> <tt>head <i>fichier</i></tt> permet de garder les <i>n</i>
- premières lignes d'un fichier</li>
- </ul>
- <p>On verra comment composer ces commandes pour exécuter des
- opérations complexes</p>
-</div>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Systèmes d'exploitation (2/2)</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- <style>
- #svg2,#svg3 {
- -webkit-transform: scale(1.8) translateX(40%);
- transform: scale(1.8) translateX(40%);
- }
- </style>
- </head>
- <body>
- <a href="prog_internet_01.xhtml" class="sws-previous" />
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 2</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li> Systèmes d'exploitation
- <ul class="empty">
- <li>1.1 Principes des systèmes
- d'exploitation ✔</li>
- <li>1.2 Système de gestion de fichiers ✔</li>
- <li class="hl">1.3 Système de gestion de processus</li>
- </ul>
- </li>
- </ol>
- </div>
-
- <div class="sws-slide">
- <h1> Définitions </h1>
- <table class="desc">
- <tr>
- <td style="width:6.5em;">Programme</td> <td>séquences d'instructions effectuant
- une tâche sur un ordinateur</td>
- </tr>
- <tr>
- <td>Exécutable</td> <td>fichier binaire contenant des
- instructions machines interprétables par le
- microprocesseur</td>
- </tr>
- <tr>
- <td><i>Thread</i> </td>
- <td>plus petite unité de traitement (≡
- séquence d'instructions) pouvant être ordonnancée par
- l'OS
- </td>
- </tr>
- <tr>
- <td>Processus</td>
- <td> instance d'un programme (≡ « un
- programme en cours d'exécution »). Un processus est constitué
- de un ou plusieurs <i>threads</i>.</td>
- </tr>
- </table>
- </div>
-
- <div class="sws-slide">
- <h1> Exemple: programme </h1>
- <p>Dans un fichier « <code> counter.c </code> »
- (<span style="color:red;">attention c'est du pseudo
- C</span>)</p>
- <div style="float:left;clear:both;vertical-align:top;width:45%;display:inline-block;border-right: 1pt solid #494948;">
-<code > int count = 0;
- int exit = 0;
- void <span style="color:green;">display()</span> {
- while (exit == 0) {
- sleep (3);
- printf("%i\n", count);
- }
- }
- void <span style="color:red;">listen()</span> {
- while (exit == 0) {
- wait_connect(80);
- count++;
- }
- }</code>
- </div> <div style="vertical-align:top;display:inline-block;width:45%;">
-<code> void <span style="color:blue;">main ()</span> {
- run_function(display);
- run_function(listen);
- while (getc () != '\n') { };
- exit = 1;
- return;
- }</code>
- </div>
- </div>
- <div class="sws-slide">
- <h1> Exemple: programme </h1>
- <p>Compilation <br/>
- <code>
- gcc -o counter.exe counter.c
- </code><br/>
- Le <em>fichier</em> « <code>counter.exe</code> » est un
- exécutable (fichier binaire contenant du code machine)<br/>
- <code>
- ./counter.exe <span style="margin-left:2em;font-size:smaller;color:red;"> ← il faut la permission +x sur le fichier</span>
- </code>
- <br/>
- Le contenu de l'exécutable est copié en mémoire et le processeur
- commence à exécuter la première instruction du programme.
- </p>
- </div>
- <div class="sws-slide">
- <h1> Exemple: <i>threads</i> </h1>
- <ol>
- <li class="sws-pause" ><span style="color:white;background:blue">main</span> </li>
- <li class="sws-pause" ><span style="color:blue;">attente d'un évènement clavier
- →</span><span style="color:red;">←changement de <i>thread</i></span>
- </li>
- <li class="sws-pause" ><span style="color:white;background:red">listen</span> </li>
- <li class="sws-pause" ><span style="color:red;">attente de connexion →</span><span style="color:green;">←changement de <i>thread</i></span>
- </li>
- <li class="sws-pause" ><span style="color:white;background:green">display</span> (<span style="color:green;">affiche
- 0 à l'écran)</span> </li>
- <li class="sws-pause" ><span style="color:green;">attente pendant 3s →</span> (les
- 3 <i>threads</i> attendent un évènement externe)<br/>
- <span class="sws-pause" >nouvelle connexion sur le port 80</span> <span style="color:red;">←
- réveil du <i>thread</i> <code style="color:red;">listen</code></span>
- </li>
- <li class="sws-pause" ><span style="color:white;background:red">listen</span>
- (<span style="color:red;">incrémente <code style="color:red">count</code></span>)<br/>
- <span style="color:red;">attente de connexion →</span><br/>
- <span>… fin des 3s</span><br/>
- <span style="color:green;">←
- réveil du <i>thread</i> <code style="color:green;">display</code></span>
- </li>
- <li class="sws-pause" ><span style="color:white;background:green">display</span> (<span style="color:green;">affiche
- 1 à l'écran)</span> </li>
- </ol>
- <p class="sws-pause" >Les <i>threads</i> partagent leur mémoire (variables communes)</p>
- </div>
- <div class="sws-slide">
- <h1>Exemple: processus</h1>
- <p>(différence: les processus
- <em>ne partagent pas leur espace mémoire</em>)</p>
- <ol>
- <li>Exécution de <code><span style="color:blue;">coun</span><span style="color:red;">ter</span><span style="color:green;">.exe</span></code> pendant 50㎲
- </li>
- <li > Exécution
- de <code><span style="color:orange;">firefox.exe</span></code>
- pendant 50㎲ </li>
- <li > Exécution du processus qui dessine le bureau pendant 50
- ㎲<br/> … </li>
-
- </ol>
- <p>C'est le <em>gestionnaire de processus</em> qui décide quel
- programme a la main et pour combien de temps (priorité aux
- tâches critiques par exemple)<br/>
- Le système d'exploitation stocke pour chaque processus un
- ensemble d'informations, le PCB (<i>Process Control Block</i>).
- </p>
- </div>
- <div class="sws-slide">
- <h1>Proccess Control Block</h1>
- <p>Le PCB contient:</p>
- <ul>
- <li>l'<em>identificateur du processus</em> (pid)</li>
- <li>l'<em>l'état</em> du processus (en attente, en exécution,
- bloqué, …)</li>
- <li>le compteur d'instructions (<i>i.e.</i> où on en est dans
- le programme)</li>
- <li>le <em>contexte courant</em>(état des registres, …)</li>
- <li>position dans <em>la file d'attente de priorité
- globale</em></li>
- <li>informations mémoire (zones allouées, zones accessibles,
- zones partagées)</li>
- <li>listes des fichiers ouverts (en lecture, en écriture),
- liste des connexions ouvertes, … <br/> … </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Opérations sur les processus</h1>
- <ul>
- <li><em>création</em> et <em>destruction</em> de
- processus</li>
- <li><em>suspension</em> et <em>reprise</em></li>
- <li><em>duplication</em> (<i>fork</i>)</li>
- <li>modification de la <em>priorité</em></li>
- <li>modification des <em>permissions </em></li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>États d'un processus</h1>
- <p>Un processus change d'état au cours de son exécution</p>
- <table class="desc">
- <tr><td style="width:6em;">Nouveau</td> <td>le processus est en cours de création</td></tr>
- <tr><td>Exécution</td> <td>le processus s'exécute</td></tr>
- <tr><td>En attente</td> <td>le processus attend un évènement
- particulier (saisie au clavier, écriture sur le disque,
- …)</td></tr>
- <tr><td>Prêt</td> <td>le processus est prêt à reprendre son
- exécution et attend que l'OS lui rende la main</td></tr>
- <tr><td>terminé</td> <td>le processus a fini son exécution</td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>États d'un processus</h1>
- <p>L'OS détermine et modifie l'état d'un processus:</p>
- <ul>
- <li>En fonction d'évènements internes au processus:
- <ul><li>lecture d'un fichier (si le contenu n'est pas
- disponible, le processus passe de « prêt » à « en attente
- »)</li>
- <li>le processus attends volontairement pendant x
- secondes<br/>…</li>
- </ul>
- </li>
- <li>
- En fonction d'évènements externes au processus:
- <ul><li>un fichier devient disponible</li>
- <li>un <i>timer</i> arrive à 0</li>
- <li>le matériel déclenche une <em>interruption</em></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>États d'un processus</h1>
- <svg
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- version="1.1"
- width="340.10629"
- height="207.70399"
- viewBox="0 0 350 208"
- id="svg2"
- >
- <defs
- id="defs4">
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- </defs>
- <g
- transform="translate(-43.8,-16.162183)"
- id="layer1">
- <g
- transform="translate(2.8953552e-6,-2.2416992e-6)"
- id="g4956">
- <text
- x="50"
- y="32.362183"
- id="text2985"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="50"
- y="32.362183"
- id="tspan2987">Nouveau</tspan></text>
- <text
- x="140"
- y="102.36218"
- id="text2989"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="140"
- y="102.36218"
- id="tspan2991">Prêt</tspan></text>
- <text
- x="255"
- y="102.36218"
- id="text2993"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="255"
- y="102.36218"
- id="tspan2995">En exécution</tspan></text>
- <text
- x="195"
- y="187.36218"
- id="text2997"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="195"
- y="187.36218"
- id="tspan2999">En attente</tspan></text>
- <rect
- width="65"
- height="20"
- rx="5"
- ry="5.25"
- x="45"
- y="17.362183"
- id="rect3007"
- style="fill:none;stroke:#ffff05;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- <rect
- width="45"
- height="20"
- rx="5"
- ry="5.25"
- x="130"
- y="87.362183"
- id="rect3007-2"
- style="fill:none;stroke:#009eff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- <rect
- width="90"
- height="20"
- rx="5"
- ry="5.25"
- x="250"
- y="87.362183"
- id="rect3007-8"
- style="fill:none;stroke:#5aff0b;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- <rect
- width="68"
- height="19"
- rx="5"
- ry="5.25"
- x="192"
- y="173.36218"
- id="rect3007-7"
- style="fill:none;stroke:#ff7b00;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- <path
- d="m 70,42.362183 c 0,35 20,55 55,55"
- id="path3809"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 150,82.362183 c 30,-30 120,-30 145,0"
- id="path3809-2"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 295,112.36218 c -30,30 -121.15954,29.51126 -146.15954,-0.48874"
- id="path3809-2-8"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 305,112.36218 c 0,35 -10,70 -45,70"
- id="path3809-9"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 185,182.36218 c -35.00001,0 -45,-35 -45,-70"
- id="path3809-9-6"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <text
- x="325"
- y="217.36218"
- id="text2997-5"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="325"
- y="217.36218"
- id="tspan2999-3">Terminé</tspan></text>
- <rect
- width="58"
- height="19"
- rx="5"
- ry="5.25"
- x="322"
- y="203.36218"
- id="rect3007-7-6"
- style="fill:none;stroke:#ff0000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- <path
- d="m 315,112.36218 c 13.42024,11.32439 24.04764,43.74151 35,85"
- id="path3809-9-6-7"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 225,197.36218 c 15,15 60,15 95,15"
- id="path3809-9-6-2"
- style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2, 1;stroke-dashoffset:0;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 135,112.36218 c 5,85 20,100 185,105"
- id="path3809-8"
- style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2, 1;stroke-dashoffset:0;marker-end:url(#Arrow2Mend)" />
- <text
- x="225"
- y="37.362183"
- id="text4821"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="225"
- y="37.362183"
- id="tspan4823">mise en route</tspan><tspan
- x="225"
- y="48.612183"
- id="tspan4825">par l'ordonnanceur</tspan></text>
- <text
- x="220"
- y="117.36218"
- id="text4821-3"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="220"
- y="112.36218"
- id="tspan4823-1">interruption</tspan><tspan
- x="220"
- y="123.61218"
- id="tspan4825-7">par l'ordonnanceur</tspan></text>
- <text
- x="300"
- y="187.36218"
- id="text4821-0"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="300"
- y="187.36218"
- id="tspan4825-74">attente E/S</tspan><tspan
- x="300"
- y="198.61218"
- id="tspan4864">interruption</tspan></text>
- <text
- x="180"
- y="152.36218"
- id="text4821-0-2"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="180"
- y="152.36218"
- id="tspan4864-7">fin E/S</tspan><tspan
- x="180"
- y="163.61218"
- id="tspan4892">int. traitée</tspan><tspan
- x="180"
- y="174.86218"
- id="tspan4894">…</tspan></text>
- <text
- x="360"
- y="147.36218"
- id="text4821-0-29"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="365"
- y="147.36218"
- id="tspan4864-1">terminaison</tspan><tspan
- x="365"
- y="158.61218"
- id="tspan4909">normale</tspan></text>
- <text
- x="170"
- y="212.36218"
- id="text4821-0-7"
- xml:space="preserve"
- style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="170"
- y="212.36218"
- id="tspan4864-75">terminaison</tspan><tspan
- x="170"
- y="223.61218"
- id="tspan4935">anormale</tspan></text>
- </g>
- </g>
- </svg>
- </div>
- <div class="sws-slide">
- <h1>La commande <code><em>ps</em></code></h1>
- <p>Permet d'avoir des informations sur les processus en cours
- d'exécution (voir « <code>man ps</code> » pour les
- options):<br/>
- <code>$ ps -o user,pid,state,cmd x
- USER PID S CMD
- …
- kim 27030 Z [chrome] <defunct>
- kim 27072 S /opt/google/chrome/chrome --type=renderer
- kim 29146 S bash
- kim 29834 S evince
- kim 29858 S emacs cours.xhtml
- kim 29869 R ps -o user,pid,state,cmd x
- </code><br/>
- </p>
-
- </div>
- <div class="sws-slide">
- <h1>États des processus (sous Linux)</h1>
- <table class="desc">
- <tr> <td>R</td> <td> <i>Running</i> (en cours d'exécution)</td> </tr>
- <tr> <td>S</td> <td> <i>Interruptible sleep</i> (en attente,
- interruptible) </td> </tr>
- <tr> <td>D</td> <td> <i>Uninterruptible sleep</i> (en attente,
- non-interruptible) </td> </tr>
- <tr> <td>T</td> <td> <i>Stopped</i> (interrompu)</td></tr>
- <tr> <td>Z</td> <td> <i>Zombie</i> (terminé mais toujours
- listé par le système)</td> </tr>
- </table>
- </div>
-
- <div class="sws-slide">
- <h1>Signaux</h1>
- <p>L'OS peut envoyer des <em>signaux</em> à un processus. Sur réception
- d'un signal, un processus peut interrompre son comportement normal
- et exécuter son <em>gestionnaire de signal</em>. Quelques signaux:
- </p>
- <table class="simple">
- <tr><th>Nom</th> <th>Code</th> <th>Description</th> </tr>
- <tr><td>HUP</td> <td>1</td> <td>demande au processus de
- s'interrompre</td></tr>
- <tr><td>INT</td> <td>2</td> <td>demande au processus de se
- terminer</td></tr>
- <tr><td>ABRT</td> <td>2</td> <td>interrompt le processus et produit
- un <i>dump</i></td></tr>
- <tr><td>KILL</td> <td>9</td> <td>interrompt le processus immédiatement
- </td></tr>
- <tr><td>SEGV</td> <td>11</td> <td>signale au processus une erreur mémoire
- </td></tr>
- <tr><td>STOP</td> <td>24</td> <td>suspend l'exécution du processus
- </td></tr>
- <tr><td>CONT</td> <td>28</td> <td>reprend l'exécution d'un processus suspendu
- </td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Processus et terminal</h1>
- <p >Un processus est lié au <em>terminal</em> dans lequel il est
- lancé. Si on exécute un programme dans un terminal et que le
- processus ne rend pas la main, le terminal est bloqué
-<code >
-
- $ gedit
-
-</code>
- On peut envoyer au processus le signal <em>STOP</em> en
- tapant <code>ctrl-Z</code> dans le terminal:
-<code>
-
- $ gedit
- ^Z
- [1]+ Stopped gedit
-
-</code>
- Le processus est suspendu, la fenêtre est gelée (ne répond plus).
- </p>
- </div>
- <div class="sws-slide">
- <h1>Processus et terminal</h1>
- <p> <span>On peut reprendre l'exécution du programme de deux
- manières:<br/>
- <code> $ fg </code><br/>
- Reprend l'exécution du processus et le remet en avant plan (terminal
- bloqué)</span><br/>
- <span class="sws-pause"><code> $ bg </code><br/>
- Reprend l'exécution du processus et le remet en arrière plan (terminal
-libre)</span><br/>
- <span class="sws-pause">On peut lancer un programme
- directement en arrière plan en faisant:<br/>
-<code> $ gedit & </code><br/></span>
- <span class="sws-pause">On peut envoyer un signal à un
- processus avec la commande « <code>kill [-signal] pid</code> »<br/>
-<code> $ kill -9 2345 </code></span>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Processus et entrées/sorties</h1>
- <p>Le terminal et le processus sont liés par trois fichiers
- spéciaux:</p>
- <ol>
- <li> L'entrée standard (<code><em>stdin</em></code>), reliée
- au clavier</li>
- <li> La sortie standard (<code><em>stdout</em></code>), reliée
- à l'affichage</li>
- <li> La sortie d'erreur (<code><em>stderr</em></code>), reliée
- à l'affichage</li>
- </ol>
- <p>Dans le <i>shell</i>, on peut utiliser les
- opérateurs <code><em><</em></code>, <code><em>></em></code>
- et <code><em>2></em></code> pour récupérer le contenu
- de <code><em>stdin</em></code>, <code><em>stdout</em></code>
- et <code><em>stderr</em></code>:<br/>
-<code>
-$ sort < toto.txt
-$ ls -l > liste_fichiers.txt
-$ ls -l * 2> erreurs.txt
-</code>
-</p>
-</div>
- <div class="sws-slide">
- <h1>Processus et entrées/sorties</h1>
- <p>Dans le <i>shell</i>, l'opérateur <em>|</em> permet
- d'enchaîner la sortie d'un programme avec l'entrée d'un
- autre:<br/>
-<code> $ <span style="color:green;">ls -l *.txt</span> | <span style="color:blue">sort -n -r -k 5</span> | <span style="color:orange">head -n 1</span></code>
- </p>
- <ol>
- <li style="color:green;">affiche la liste détaillée des
- fichiers textes</li>
- <li style="color:blue;">trie (et affiche) l'entrée standard par ordre
- numérique décroissant selon le 5ème champ</li>
- <li style="color:orange;">affiche la première ligne de
- l'entrée standard</li>
- </ol>
- <div style="height:5em;position:relative;margin:0 0;padding:0 0;">
-<code class="sws-onframe-1" style="position:absolute;color:green;"> -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt
- -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt
- -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt</code>
-<code class="sws-onframe-2" style="position:absolute;color:blue;"> -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt
- -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt
- -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt
-</code>
-<code class="sws-onframe-3" style="position:absolute;color:orange;"> -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt
-</code>
- </div>
-
- </div>
-<div class="sws-slide">
- <h1>Processus de type <i>daemon</i></h1>
-<p>
- Un <i>daemon</i> (prononcé démon) est un processus
- qui <em>non-interactif</em> qui tourne en tâche de fond (pas
- d'entrée/sortie sur le terminal, pas d'interface graphique, …). On
- communique avec ce processus via des <em>signaux</em> ou en lisant
- ou écrivant dans des fichiers ou connexions réseau. Le plus souvent,
- leur but est de fournir un <em>service</em>
-</p>
-<p>Exemple de scénario: « <i> Les utilisateurs doivent interagir avec
- le matériel. L'accès au matériel demande des droits
- administrateur.</i> »
-</p>
-<ul class="empty">
- <li>Solution 1 : tout le monde est administrateur (DOS, Win XP,
- …)</li>
- <li>Solution 2 : on crée un programme particulier qui a les
- privilèges suffisants pour la tâche en question. Les utilisateurs
- communiquent avec ce programme</li>
-</ul>
-</div>
-<div class="sws-slide">
- <h1>Quelques <i>daemons</i> sous Linux</h1>
-<table class="simple">
-<tr><th>Nom</th> <th>Description</th> </tr>
-<tr><td>sshd</td> <td><i>shell</i> distant sécurisé</td> </tr>
-<tr><td>crond</td> <td>exécution périodique de programmes</td> </tr>
-<tr><td>cupsd</td> <td>serveur d'impressions</td> </tr>
-<tr><td>pulseaudio</td> <td>serveur de son (mixe les sons des
- différentes applications)</td> </tr>
-<tr><td>udevd</td> <td>détection de matériel <i>hotplug</i></td></tr>
-<tr><td>nfsd</td> <td>serveur de fichier réseau</td></tr>
-<tr><td>smtpd</td> <td>livraison des e-mail</td></tr>
-<tr class="sws-pause"><td><em>httpd</em></td> <td>serveur de pages Web</td></tr>
-</table>
-</div>
-<div class="sws-slide">
-<h1>Architecture client-serveur</h1>
-<svg
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- version="1.1"
- width="256"
- height="163.70399"
- id="svg3">
- <defs
- id="defs3115">
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-9"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-7"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-2"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-3"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-1"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-71"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="marker4143"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path4145"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-11"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-39"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="marker4143-8"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path4145-9"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-6"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-1"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="marker4245"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path4247"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-7"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-8"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="marker4353"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path4355"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="Arrow2Mend-8"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path3842-4"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- <marker
- refX="0"
- refY="0"
- orient="auto"
- id="marker4353-5"
- style="overflow:visible">
- <path
- d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
- transform="scale(-0.6,-0.6)"
- id="path4355-9"
- style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
- </marker>
- </defs>
- <g
- transform="translate(-158.9,-91.262203)"
- id="layer1">
- <g
- id="g3947">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068">
- <text
- x="166.2"
- y="180.85818"
- id="text2985"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="translate(-1.2000122,1.5039978)"
- id="g3942">
- <text
- x="266.20001"
- y="175.85818"
- id="text2985-1"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="266.20001"
- y="175.85818"
- id="tspan3164">Serveur</tspan></text>
- <rect
- width="53.799988"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="261.20001"
- y="160.85818"
- id="rect3007-8"
- style="fill:none;stroke:#0000ff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- <g
- id="g4097">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- <g
- transform="translate(210,0)"
- id="g3947-5">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068-3">
- <text
- x="166.2"
- y="180.85818"
- id="text2985-0"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987-3">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007-5"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="translate(109.96827,1.0864348)"
- id="g4097-7">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809-3"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5-7"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- <g
- transform="matrix(0.56532555,0.82486788,-0.82486788,0.56532555,266.51188,-153.17986)"
- id="g4097-0">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809-2"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5-5"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- <g
- transform="translate(40,-70)"
- id="g3947-3">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068-36">
- <text
- x="166.2"
- y="180.85818"
- id="text2985-2"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987-4">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007-7"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="translate(165,-70)"
- id="g3947-1">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068-1">
- <text
- x="166.2"
- y="180.85818"
- id="text2985-9"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987-6">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007-6"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="matrix(-0.56532555,0.82486788,0.82486788,0.56532555,302.25486,-153.17986)"
- id="g4097-0-8">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809-2-9"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5-5-7"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- <g
- transform="translate(40,70)"
- id="g3947-3-1">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068-36-8">
- <text
- x="166.2"
- y="180.85818"
- id="text2985-2-8"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987-4-1">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007-7-3"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="translate(160,70)"
- id="g3947-1-7">
- <g
- transform="translate(-1.1999969,-3.4960022)"
- id="g4068-1-2">
- <text
- x="166.2"
- y="180.85818"
- id="text2985-9-4"
- xml:space="preserve"
- style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
- x="166.2"
- y="180.85818"
- id="tspan2987-6-0">Client</tspan></text>
- <rect
- width="43.800003"
- height="21.503998"
- rx="5"
- ry="5.25"
- x="161.2"
- y="165.85818"
- id="rect3007-6-4"
- style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
- </g>
- </g>
- <g
- transform="matrix(0.56532555,0.82486788,-0.82486788,0.56532555,327.54691,-80.416181)"
- id="g4097-0-2">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809-2-3"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5-5-5"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- <g
- transform="matrix(-0.56532555,0.82486788,0.82486788,0.56532555,242.10224,-81.191343)"
- id="g4097-0-3">
- <path
- d="m 210,177.36218 c 15,10 30,10 45,0"
- id="path3809-2-7"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- <path
- d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
- id="path3809-5-5-9"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
- </g>
- </g>
-</svg>
-<p>
- <br/><br/>
- Des processus <span style="color:blue;">clients</span> communiquent
- avec le <span style="color:orange;">serveur</span> à travers le
- réseau. Les clients sont indépendant et ne communiquent pas entre
- eux. <em>Attention</em> plusieurs clients peuvent se trouver su la
- même machine physique!
-</p>
-</div>
-<div class="sws-slide">
- <h1>Architecture client-serveur</h1>
-<ul>
- <li>Le serveur attend des connexions entrantes</li>
- <li>Les clients peuvent se connecter à tout moment</li>
- <li>L'application client est généralement légère, envoie une
- requête au serveur et attend un résultat</li>
- <li>Le serveur est une application plus lourde qui:
- <ul><li>effectue des calculs trop coûteux pour le client</li>
- <li>gère l'accès à une ressource distante partagée<br/>…</li>
- </ul>
- </li>
-</ul>
-<p>Exemples: serveur de bases de données, serveur mail, serveur Web,
- terminal de carte bancaire, …</p>
-</div>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Réseaux, TCP/IP</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- <style>
- #svg2,#svg3 {
- -webkit-transform: scale(1.8) translateX(40%);
- transform: scale(1.8) translateX(40%);
- }
- </style>
- </head>
- <body>
- <a class="sws-previous" href="prog_internet_02.xhtml" />
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 2</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
-
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Web et HTML</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a class="sws-previous" href="prog_internet_03.xhtml" />
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 4</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li> Systèmes d'exploitation ✔</li>
- <li> Réseaux et Internet ✔ </li>
- <li> Le Web
- <ul class="empty">
- <li class="hl">3.1 Internet et ses services</li>
- <li>3.2 Fonctionnement du Web</li>
- <li>3.3 Adressage des documents Web</li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <h1>Internet et ses services </h1>
- <div class="sws-slide">
- <h1> Bref historique d'Internet (1/2)</h1>
- <table class="desc">
- <tr>
- <td style="width:6.5em;">1959-1968</td> <td>ARPA
- (<i>Advanced Research Project Agency</i>) crée un réseau
- de quelques machines capable de résister à une attaque.</td>
- </tr>
- <tr>
- <td>1969</td> <td>ARPANET. Interconnexion des ordinateurs
- centraux des grandes universités et institutions
- américaines. Première utilisation du concept de paquet d'information.</td>
- </tr>
- <tr>
- <td>1970-1982 </td>
- <td>Interconnexion avec la Norvège et le Royaume-Uni.
- </td>
- </tr>
- <tr>
- <td>1982</td>
- <td> Passage au protocole TCP/IP. Naissance de l'Internet actuel.</td>
- </tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1> Bref historique d'Internet (2/2)</h1>
- <table class="desc">
- <tr>
- <td style="width:6.7em;">1986</td> <td>« Autoroutes de
- l'information ». Des super-ordinateurs et les premières
- connexions à fibres optiques sont utilisées pour accélérer
- le débit d'Internet.</td>
- </tr>
- <tr>
- <td>1987-1992</td> <td>Apparition des premiers fournisseurs
- d'accès. Les entreprises se connectent.</td>
- </tr>
- <tr>
- <td>1993-2000 </td>
- <td>Avènement du Web. Démocratisation du haut-débit (vers
- 2000 pour la France).
- </td>
- </tr>
- <tr>
- <td>2000-présent</td>
- <td> Explosion des services en ligne, arrivée des réseaux
- sociaux, internet mobile, <i>Cloud</i> (stockage et calcul
- mutualisés accessible depuis internet).</td>
- </tr>
- </table>
- </div>
-
- <div class="sws-slide">
- <h1> Internet </h1>
- <ul>
- <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
- </li>
- <li> Modèle Client/Serveur</li>
- <li> Un serveur fournit un service:
- <ul>
- <li>courriel</li>
- <li>transfert de fichier (ftp)</li>
- <li>connexion à distance (ssh)</li>
- <li>Web (http)</li>
- </ul>
- </li>
- <li> Plusieurs services peuvent être actifs sur la même
- machine (serveur). Un <em>port (identifiant numérique)</em>
- est associé à chaque service. Sur Internet, un service est
- identifié par:
- <ul>
- <li>L'adresse IP de la machine sur lequel il fonctionne</li>
- <li>Le numéro de port sur lequel le programme attend les
- connexions</li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1> Exemples de services </h1>
- <table class="simple" style="width:100%">
- <tr><th style="width:10%">Service</th>
- <th style="width:40%">Protocole</th>
- <th style="width:5%">Port</th>
- <th style="width:45%;">Description</th>
- </tr>
- <tr>
- <td>ftp</td> <td >File Transfer Protocol</td> <td>
- 20,21 </td> <td>Transfert de fichiers</td> </tr>
- <tr> <td>telnet</td> <td>Network Virtual
- Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
- <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
- distance crypté</td></tr>
- <tr> <td>mail</td><td>Simple Mail Transfer
- Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
- <tr><td>pop</td> <td>Post Office
- Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
- <tr><td>imap</td> <td>Internet Message Access
- Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
- <tr><td>nslookup</td> <td>Domain Name
- System</td> <td>42</td> <td>Serveur de noms</td></tr>
- <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
-
- </table>
- </div>
- <div class="sws-slide">
- <h1> World Wide Web (1/2)</h1>
- <ul>
- <li>Service de distribution de page <em>hypertexte</em></li>
- <li>Une page <em>hypertexte</em> contient des références
- immédiatement accessibles à d'autres pages (pointeurs
- ou <em>liens hypertextes</em>)</li>
- <li>Les pages sont décrites dans le
- langage <em>HTML</em> (HyperText Markup Language) </li>
- <li>Architecture client/serveur:
- <ul>
- <li>Les pages sont stockées sur le serveur</li>
- <li>Les pages sont envoyées au client (navigateur Web) qui
- en assure le rendu</li>
- </ul>
- </li>
- <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
- le client et le serveur</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1> World Wide Web (2/2)</h1>
- <p>Concepts clé:</p>
- <table class="desc">
- <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
- la page »)</td> </tr>
- <tr><td>HTTP</td> <td>protocole de communication entre un
- client et un serveur Web</td> </tr>
- <tr><td>HTML</td> <td>langage de description des pages
- Web</td> </tr>
- </table>
- <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
- <ul>
- <li>Standardisation du contenu multimédia (images, vidéos et
- sons en <i>streaming</i>)</li>
- <li>Contenu interactif avancé (stockage de fichier coté
- client, rendu 3D, …)</li>
- <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
- </ul>
- </div>
-
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="hl" >3.2 Fonctionnement du Web</li>
- <li class="">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <h1> Fonctionnement du Web </h1>
- <div class="sws-slide">
- <h1>Fonctionnement du Web</h1>
- <div style="text-align:center;">
- <img style="width:90%;height:50%;" src="cours_4.svg"
- type="image/svg+xml" />
- </div>
-
- </div>
-
- <div class="sws-slide">
- <h1>Côté client</h1>
- <p>Le navigateur :</p>
- <ul>
- <li>Analyse l'URL demandée</li>
- <li>Obtient l'adresse IP auprès du serveur DNS</li>
- <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
- <li>Envoie une <em>requête HTTP</em> au serveur</li>
- <li>Récupère la page envoyée par le serveur dans
- sa <em>réponse</em></li>
- <li>Analyse la page et récupère les éléments référencés :
- images, sons, …</li>
- <li>Effectue le traitement du code client</li>
- <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1>Côté serveur</h1>
- <ul>
- <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
- connexions sur un port par défaut (80 dans le cas de HTTP)</li>
- <li>À chaque nouvelle connexion, le <i>listener</i> crée
- un <i>thread</i> de traitement et se remet en attente
- </li>
- <li>Le <i>thread</i> de traitement vérifie la validité de la
- requête :
- <ul>
- <li>le document demandé existe ?
- </li>
- <li>le client est autorisé à accéder au document ?
- </li>
- <li>…</li>
- </ul>
- </li>
- <li>Le <i>thread</i> de traitement répond à la requête :
- <ul>
- <li>Exécution de code côté serveur, récupération de
- données dans une BD, …
- </li>
- <li>Envoi de la page au client
- </li>
- </ul>
- </li>
- </ul>
- </div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="hl">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <h1> Adressage des documents Web </h1>
- <div class="sws-slide">
- <h1>Adressage des documents Web (1/3)</h1>
- <table class="desc">
- <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
- identifie un document sur internet</td></tr>
- </table>
- <p>Une URL se décompose en 3 partie</p>
- <ul><li><em>protocole</em> (comment ?)</li>
- <li><span style="color:orange;">adresse</span> (où ?)</li>
- <li><span style="color:blue;">document</span> (quoi ?)</li>
- </ul>
- <p>Syntaxe (simplifiée) :</p>
- <code> <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
- <p>Exemple :</p>
- <code> <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
- </div>
-
- <div class="sws-slide">
- <h1>Adressage des documents Web (2/3)</h1>
- <p>On peut aussi préciser <span style="color:purple;">un numéro
- de port</span>, des <span style="color:black;">paramètres</span>
- et un <span style="color:red;">emplacement</span> :
- </p>
- <code> <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
- <p class="sws-pause" >Exemple :</p>
- <code> <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
- <p>Le serveur utilise les paramètres passés par le client dans
- l'URL pour <i>calculer</i> le contenu de la page (changer la
- chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
- </div>
- <div class="sws-slide">
- <h1>Adressage des documents Web (3/3)</h1>
- <p>
- La <em>racine</em> d'un site Web
- (ex: <em><code>http://www.lri.fr/</code></em>) correspond
- à un répertoire sur le disque du serveur
- (ex: <em><code>/var/www</code></em>). Le fichier</p>
- <code> http://www.lri.fr/index.html</code>
- <p>se trouve à l'emplacement</p>
- <code> /var/www/index.html</code>
- <p>Le serveur Web peut aussi effectuer des <em>réécritures
- d'adresses</em> :</p>
- <code> http://www.lri.fr/~kn/index.html</code>
- <p>devient</p>
- <code> /home/kn/public_html/index.html</code>
- </div>
-
- <h1>Le protocole HTTP</h1>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="hl">3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
-
- <div class="sws-slide">
- <h1>Caractéristiques du protocole HTTP</h1>
- <ul>
- <li>Sans connexion permanente:
- <ul>
- <li>Le client se connecte au serveur, envoie sa requête,
- se déconnecte</li>
- <li>Le serveur se connecte au client, envoie sa réponse,
- se déconnecte</li>
- </ul>
- </li>
- <li>Indépendant du contenu : permet d'envoyer des documents
- (hyper) texte, du son, des images, …</li>
- <li>Sans <em>état</em>: chaque paire requête/réponse est
- indépendante (le serveur ne maintient pas d'information sur le
- client entre les requêtes)</li>
- <li>Protocole en mode <em>texte</em></li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Format des messages HTTP</h1>
- <p>Les messages ont la forme suivante</p>
- <ul><li>Ligne initiale CR LF</li>
- <li>zéro ou plusieurs lignes d'option CR LF</li>
- <li>CR LF</li>
- <li>Corp du message (document envoyé, paramètres de la
- requête, …)</li>
- </ul>
- <ul><li><em>Requête</em> la première ligne contient un nom
- de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
- méthode et la version du protocole</li>
- <li><em>Réponse</em> la version du protocole, le code de la
- réponse (200, 404, 403, …) et un message informatif
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Démo</h1>
- </div>
- <h1>HTML, le format des documents</h1>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="done">3.4 Le protocole HTTP</li>
- <li class="hl">3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <div class="sws-slide">
- <h1>HTML</h1>
- <p>
- <em>HyperText Markup Language</em> : langage de mise en forme
- de documents hypertextes (texte + liens vers d'autres
- documents). Développé au CERN en 1989.<br/>
- <em>1991</em> : premier navigateur en mode texte<br/>
- <em>1993</em> : premier navigateur graphique (mosaic)
- développé au NCSA (National Center for Supercomputing
- Applications)
- </p>
- </div>
- <div class="sws-slide">
- <h1>Document HTML</h1>
- <ul><li> est un document <em>semi-structuré</em></li>
- <li> dont la structure est donnée par
- des <em>balises</em></li>
- </ul>
- <div>
- <table class="btable simple" style="width:90%;margin-left:5%">
- <thead>
- <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
- </thead>
- <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
- texte <b>en gras</b></td></tr>
- <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
- <td><a style="color:blue;text-decoration:underline;"
- href="http://www.u-psud.fr">Un lien</a></td></tr>
- <tr><td><code><![CDATA[<ul>
- <li>Premièrement</li>
- <li>Deuxièmement</li>
-</ul> ]]></code></td> <td><ul>
-<li>Premièrement</li>
-<li>Deuxièmement</li>
-</ul>
-</td></tr>
- </table>
- </div>
-<p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
- ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
- balise <em>fermante</em>. On peut
- écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
- <tt><![CDATA[<toto></toto>]]></tt>.
-</p>
- </div>
- <div class="sws-slide">
- <h1>Historique du langage HTML</h1>
-<table class="desc">
- <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
-IBM. Introduction de la notion de balise.</td></tr>
-<tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
-<tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
-netscape, ... ) interprètent le standard de manière
-différente</td></tr>
-<tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
-documents semi-structurés (SGML simplifié)</td></tr>
-<tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
- XML</td></tr>
-<tr><td>2008</td><td> Première proposition pour le nouveau standard,
- HTML5</td></tr>
-<tr><td>2014</td><td>Standardisation de HTML5</td></tr>
-</table>
- </div>
-
- <div class="sws-slide">
- <h1>XHTML <i>vs</i> HTML</h1>
- <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
- <ul>
- <li>
- Les balises sont <em>bien parenthésées</em>
- (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red"></b></span></tt> est interdit)
- </li>
- <li>Les balises sont en minuscules</li>
- </ul>
- <p>Les avantages sont les suivants</p>
- <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
- pas fermer certaines balise … Les navigateurs corrigent ces
- erreurs de manières <em>différentes</em></li>
- <li>Le document est <em>structuré</em> comme un programme
- informatique (les balises ouvrantes/fermantes correspondent à
- { et }). Plus simple à débugger.</li>
- </ul>
- </div>
-<div class="sws-slide">
- <h1>Rôle d'(X)HTML</h1>
- <p>Séparer la <em>structure</em> du document de
- son <em>rendu</em>. La structure donne une <em>sémantique</em> au
- document :</p>
- <ul>
- <li>ceci est un titre</li>
- <li>ceci est un paragraphe</li>
- <li>ceci est un ensemble de caractères importants</li>
- </ul>
- <p>Cela permet au navigateur d'assurer un rendu en fonction de la
- sémantique. Il existe différents types de rendus:</p>
- <ul>
- <li>graphique interactif (Chrome, Firefox, Internet Explorer,
- …)</li>
- <li>texte interactif (Lynx, navigateur en mode texte)</li>
- <li>graphique statique (par ex: sur livre électronique)</li>
- <li>rendu sur papier</li>
- <li>graphique pour petit écran (terminal mobile)</li>
- </ul>
-</div>
-<div class="sws-slide">
- <h1>Exemple de document</h1>
- <p style="text-align:center;font-size:smaller;">(liste des balises
- données sur la feuille de TD 4!)</p>
-<div style="margin-left:10%;">
-<code style="font-size:smaller;"><![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
- <head>
- <title>Un titre</title>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- </head>
- <body>
- <h1>Titre de section</h1>
- <p> premier paragraphe de texte. On met
- un <a href="http://www.lri.fr">lien</a> ici.
- </p>
- <!-- on peut aussi mettre des commentaires -->
- </body>
- </html>]]></code>
-</div>
-</div>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>CSS</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="prog_internet_04.xhtml" class="sws-previous"/>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 5</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
- <h1>Introduction</h1>
- <div class="sws-slide">
- <h1>Cascading Style Sheets (CSS)</h1>
- <table class="desc">
- <tr>
- <td >CSS</td> <td>
- Langage permettant de décrire le <em>style graphique</em>
- d'une page HTML
- </td>
- </tr>
- </table>
- <p>On peut appliquer un style CSS</p>
- <ul>
- <li> À un élément en
- utilisant <em>l'attribut <code>style</code></em></li>
- <li> À une page en utilisant
- l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
- dans l'en-tête
- du document (dans la
- balise <code><![CDATA[<head>...</head>]]></code>).
- </li>
- <li>À un ensemble de pages en référençant un fichier de style
- dans chacune des pages
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>L'attribut <tt>style</tt></h1>
- <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
- </code>
- <p>Apperçu: </p>
- <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
- <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
- </p>
- <p class="sws-pause">Inconvénients :</p>
- <ul> <li>il faut copier l'attribut
- style pour tous les liens de la page</li>
- <li>modification de tous les éléments difficiles</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1>L'élément <tt>style</tt></h1>
- <code><![CDATA[ <html>
- <head>
- <title>…</title>
- <style>
-]]> <em>a { color: red; }</em>
-<![CDATA[ </style>
- </head>
- <body>
- <a href="…">Lien 1</a> <a href="…">Lien 2</a>
- </body>
- </html>]]></code>
- <p>Apperçu :</p>
- <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
- <a href="…" style="color:red;text-decoration:underline;">Lien
- 1</a>
- <a href="…" style="color:red;text-decoration:underline;">Lien 2
- </a>
- </p>
- <p>Inconvénient : local à une page</p>
- </div>
- <div class="sws-slide">
- <h1>Fichier <tt>.css</tt> séparé</h1>
- <p>Fichier <tt>style.css</tt>:</p>
- <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
- <code >a { color: red; }</code>
- </p>
- <p>Fichier <tt>test.html</tt>:</p>
- <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
- <code > <![CDATA[<html>
- <head>
- …
- ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
-<![CDATA[ </head>
- …
- </html>]]></code>
- </p>
- <p class="sws-pause">Modifications & déploiement aisé</p>
- </div>
- <div class="sws-slide">
- <h1>Syntaxe</h1>
- <p>Une <em>propriété</em> CSS est définie en utilisant la
- syntaxe:
- </p>
- <p style="text-align:center"><tt> nom_prop : val_prop
- ; </tt></p>
- <ul>
- <li>Si on utilise l'attribut <tt>style</tt> d'un
- élément:<code>
- <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
- </code>
- </li>
- <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
- style:<code>
- a {
- <em>color : red;
- border-style: solid;
- border: 1pt;</em>
- }
- h1 { /* Le style des titres de niveau 1 */
- text-decoration: underline;
- color: green;
- }
-</code></li>
- </ul>
- </div>
-<h1>Boîtes</h1>
- <div class="sws-slide">
- <h1> Unités de longueur</h1>
- <p>CSS permet de spécifier des longueurs comme valeurs de
- certaines propriétés (position et taille des éléments, épaisseur
- des bordures, …). Les longueurs <em>doivent</em> comporter une
- unité. Les unités reconnues sont:</p>
- <table class="desc">
- <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
- <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
- <tr><td>cm</td> <td>centimètre</td> </tr>
- <tr><td>mm</td> <td>millimètre</td> </tr>
- <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
- <tr><td>pc</td> <td>pica (12 points)</td></tr>
- <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
- courante</td></tr>
- <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
- de la police courante</td></tr>
- <tr><td>%</td> <td>pourcentage d'une valeur particulière
- (définie par propriété)</td></tr>
- <tr><td >vh</td> <td class="css3"><i>viewport height</i> (% de la
- hauteur de la partie visible de la page)</td></tr>
- <tr style="background:white"><td>vw</td> <td class="css3"><i>viewport
- width</i> (% de la largeur de la partie visible de la
- page)</td></tr>
- </table>
- </div>
-
-
- <div class="sws-slide">
- <h1>Boîte</h1>
-
- <p >Chaque élément de la page HTML possède une <em>boîte
- rectangulaire</em> qui délimite le contenu de l'élément:
- </p>
- <div style="text-align:center;vertical-align:text-bottom;">
- <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
- 25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
- <span id="b1" style="display:inline-block;
- color:black;
- padding:0 4vh 4vh 4vh;
- border:dotted 2pt black;"><i>margin</i> (marge)<br/>
- <span id="b2" style="display:inline-block;
- padding:0 4vh 4vh 4vh;
- color:white;background:black">
- <i>border</i> (bordure)<br/>
- <span id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
- background:white;color:black;border:dotted
- 2pt black">
- <i>padding</i> (ajustement)<br/>
- <span style="border:dotted 2pt black;
- background:white;
- position:relative;
- display:inline-block;
- font-size:15vh;
- width:2.8em;
- height:12vh;">
- <span style="color:red;
- top:-5vh;
- left:0vh;
- position:absolute;
- text-decoration:underline;
- padding:0 0 0 0;
- margin: 0 0 0 0;
- ">Lien 1
- </span>
- </span>
- </span>
- </span>
- </span>
- </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
- height<br/><br/><br/><br/>↓
- </span>
- </div>
- <script type="text/javascript">
- function all(e) {
- return $(e).children("*").addBack()
- }
- function hide(e) {
- all(e).css('visibility', 'hidden');
- };
- function show(e) {
- all(e).css('visibility', 'visible');
- }
- SWS.Presentation.registerCallback("0", function(c) {
- hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
-
- });
- SWS.Presentation.registerCallback("1", function(c) {
- hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("2", function(c) {
- hide(".b0");hide("#b1"); show("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("3", function(c) {
- hide(".b0");show("#b1"); show("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("4", function(c) {
- show(".b0");show("#b1"); show("#b2"); show("#b3");
- });
- </script>
- <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
- <tt>(height|width) = padding + margin + border + t</tt>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Marge, bordure, ajustement</h1>
- <p>On peut spécifier jusqu'à 4 valeurs:</p>
- <ul><li>1 valeur: toutes les dimensions égales à cette
- valeur</li>
- <li>2 valeurs: haut et bas égal à la première valeur, gauche
- et droite égale à la deuxième</li>
- <li>3 valeurs: haut à la première valeur, gauche
- et droite égale à la deuxième, bas égal à la troisième</li>
- <li>4 valeurs: haut, droit, bas, gauche</li>
- </ul>
- <code style="font-size:smaller;"> span {
- padding:10pt 20pt 5pt 0pt;
- margin:10pt 5pt;
- border-width:3pt;
- border-color:red blue green;
- border-style:solid dotted;
- } </code>
- <div style="text-align:center;">Du <span style="padding:10pt
- 20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
- </div>
- </div>
- <div class="sws-slide">
- <h1>Modes d'affichage</h1>
- <p>La propriété <em><i>display</i></em> contrôle le mode
- d'affichage d'un élément:
- </p>
- <table class="desc">
- <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
- pas d'espace</td></tr>
- <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
- courante, dans le flot de texte. La taille du contenu (avec
- les marges, ajustements et bordures) dicte la
- taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
- ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
- sont <i>inline</i> par défaut). </td></tr>
- <tr><td>block</td><td>l'élément est placé seul sur sa
- ligne. La taille est calculée automatiquement mais peut être
- modifiée par <tt>width</tt> et <tt>height</tt>
- (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
- sont <i>block</i> par défaut)</td></tr>
- <tr><td>inline-block</td><td>positionné comme <i>inline</i>
- mais la taille peut être modifiée comme pour <i>block</i></td></tr>
-
- </table>
- </div>
- <div class="sws-slide">
- <h1>Modes d'affichage (exemples)</h1>
- <div>
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <tt>a { display: inline; … } </tt>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- <div >
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <tt>a { display: block; … } </tt>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- <div>
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <code>a { display: inline-block;
- width: 4em;
- height: 2em;
- … } </code>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- </div>
- <div class="sws-slide">
- <h1>Positionnement</h1>
- <p>Le type de positionnement est donné par la
- propriété <em>position</em></p>
- <table class="desc">
- <tr><td>static</td><td>positionnement « automatique
- » </td></tr>
- <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
- du navigateur (la boîte est supprimée du flot)</td></tr>
- <tr><td>relative</td><td>positionnement « relatif » par
- rapport à la position normale</td></tr>
- <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
- à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
- </table>
- <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
- les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
- et <tt>right</tt> dénotent les décalages respectifs.
- </p>
- </div>
- <div class="sws-slide">
- <h1>Positionnement (exemple)</h1>
- <div>
- <div style="45%;margin:0 4%;float:left;"><code>
-<span style="color:#02a"> a { position: static;
- … }</span>
-<span style="color:#0a2"> a { position: fixed;
- right:10pt;
- top: 10pt;
- }</span></code></div>
- <div style="width:50%;float:left;"><code>
-<span style="color:#a20"> a { position: relative;
- left: 10pt;
- bottom: -5pt;
- … }</span>
-<span style="color:#a2a"> a { position:absolute;
- right:0pt;
- bottom: 10pt;
- }</span></code>
- </div><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code>
- </div><br/>
- <ul style="position:relative;float:right;background:#ddd;">
- <li>Positionnement <span style="position:static;color:#02a">static</span></li>
- <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
- (right:10pt,top:10pt)</span></li>
- <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
- (left:10pt,bottom:-5pt)</span></li>
- <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
- (right:10pt,bottom:10pt)</span></li>
-
- </ul>
- </div>
- <h1>Autres propriétés</h1>
- <div class="sws-slide">
- <h1>Couleurs</h1>
- <p>Les couleurs peuvent être données:</p>
- <ul>
- <li>par nom
- symbolique: <span style="color:red">red</span>,
- <span style="color:blue">blue</span>,
- <span style="color:purple">purple</span>,
- …</li>
- <li>en
- hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
- <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
- <li>en
- décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
- avec <tt>0 ≤ x,y,z ≤ 255</tt></li>
- <li class="css3">en
- décimal avec
- transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
- a)</tt>,
- avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
-
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Propriétés du texte</h1>
- <p>Certaines propriétés permettent d'alterer le rendu du texte
- d'un élément</p>
- <table class="desc">
- <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
- (orientation du texte)</td></tr>
- <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
- </td></tr>
- <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
- <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
- <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Propriétés de la police</h1>
- <table class="desc">
- <tr><td>font-family</td><td>liste de nom de polices séparées
- par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
- <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt> </td></tr>
- <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
- <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
- soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
- <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
-</td></tr>
- </table>
- <p class="css3" >On peut aussi spécifier un descripteur de
- police</p>
- <code>
- @font-face {
- font-family: Toto;
- src: url(toto.ttf);
- }
- a { font-family: Toto; }
- </code>
- </div>
- <h1>Selecteurs</h1>
- <div class="sws-slide">
- <h1>Selecteurs</h1>
- <p>On peut sélectionner finement les éléments auxquels un style
- s'applique</p>
- <table class="desc">
- <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
- est <tt>x</tt></td></tr>
- <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
- l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
- <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
- <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
- <tr> <td><tt>X Y</tt></td> <td>tous les éléments
- selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
- sélectionnés par <tt>X</tt></td></tr>
- <tr> <td><tt>X > Y</tt></td> <td>tous les éléments dont
- selectionné par <tt>Y</tt> qui sont des fils d'éléments
- sélectionnés par <tt>X</tt></td></tr>
- <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
- visités</td></tr>
- <tr><td><tt>a:link</tt></td><td>les liens non
- visités</td></tr>
- <tr><td><tt>X:hover</tt></td><td>élément selectionné
- par <tt>X</tt> et survollé par la souris</td></tr>
- </table>
- <code> div.foo ul li a:visited { color: red; } </code>
- </div>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>PHP : Introduction</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="prog_internet_05.xhtml" class="sws-previous"/>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 6</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <h1>Introduction et généralités</h1>
-
- <div class="sws-slide">
- <h1>Avant PHP</h1>
- <p>Constat: besoin de pages Web <em>dynamiques</em> (contenu
- généré au chargement de la page)<br/>
- Première solution: scripts (ou programmes) <em>CGI</em><br/>
- <code> http://www.example.com/foo.cgi?sort=alpha</code>
- </p>
- <ol>
- <li>Programme écrit dans n'importe quel langage et exécuté par
- le serveur Web</li>
- <li>Le serveur passe les infos au programme par
- des <em>variables d'environnement</em> et <em>l'entrée
- standard</em></li>
- <li>Le programme génère une page Web par affichage sur la
- sortie standard</li>
- </ol>
- <p class="sws-pause">Inconvénients</p>
- <ol>
- <li>Communication difficile entre le serveur Web et le
- programme</li>
- <li>Les langages généralistes <em>ne sont pas faits pour le
- Web</em> (pas de support d'HTML nativement par exemple)</li>
- </ol>
- </div>
-
- <div class="sws-slide">
- <h1>PHP (Avantages)</h1>
- <ul>
- <li> <em>Langage utilisé côté serveur</em> : le navigateur ne
- « voit » jamais de PHP, uniquement du HTML (comportement
- indépendant du navigateur)</li>
- <li> <em>Langage interprété</em> : on ne génère pas de
- binaire, déploiment facile (on copie les fichiers sur le
- serveur)</li>
- <li> <em>Intégration avec HTML</em> : PHP supporte
- des <em><i>templates</i></em> (modèles/patrons) HTML contenant
- du PHP</li>
- </ul>
- <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[ <html>
- <head><title>Heure</title></head>
- <body>
- <h1>L'heure</h1>
- <p>Il est ]]><span style="color:orange;"><?php echo date('H:i:s'); ?></span> <![CDATA[</p>
- </body>
- </html>]]></code>
- </div>
- <div class="sws-slide">
- <h1>PHP</h1>
- <ul>
- <li>On compte 140,000,000 de noms de domaines enregistrés</li>
- <li>On estime à environ 20,000,000 le nombre de sites faits en
- PHP</li>
- <li>Quelques gros sites:
- <ul><li>Facebook</li>
- <li>Portail Yahoo!</li>
- <li>Flickr</li>
- <li>Digg</li>
- <li>Wikipedia</li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Principe</h1>
- <ul>
- <li class="sws-onframe-1-5">Le serveur Web crée un fichier temporaire. Il copie le
- contenu de <tt>heure.php</tt> jusqu'à trouver la balise <tt style="color:orange"><?php</tt>
- </li>
- <li class="sws-onframe-2-5">Le code se trouvant
- entre <tt style="color:orange"><?php</tt>
- et <tt style="color:orange">?></tt> est exécuté.</li>
- <li class="sws-onframe-3-5">Tout ce que le code écrit
- (instruction <tt style="color:orange">echo</tt>) est aussi
- copié dans le fichier temporaire</li>
- <li class="sws-onframe-4-5">Le serveur web reprend la copie du fichier
- après <tt style="color:orange">?></tt>
- </li>
- <li class="sws-onframe-5">Le serveur renvoie le contenu du fichier temporaire comme
- page au client</li>
- </ul>
- <div class="sws-onframe-0-5" style="background:white;margin:0% 5%;border:solid 1pt gray">
-<code><span class="sws-onframe-1-5"><![CDATA[ <html>
- <head><title>Heure</title></head>
- <body>
- <h1>L'heure</h1>
- <p>Il est ]]></span><span class="sws-onframe-3-5"
- style="color:orange;">15:53:00</span><span class="sws-onframe-4-5"> <![CDATA[</p>
- </body>
- </html>]]></span></code>
- </div>
- </div>
-
- <div class="sws-slide">
- <h1>PHP (inconvénients)</h1>
- <ol><li>Génère du HTML via <tt><em>echo</em></tt> (débuggage
- difficile)</li>
- <li>Interprété : problème de performances si beaucoup de
- clients</li>
- <li><em><b>NON TYPÉ</b></em> : <em style="color:red">C'est
- HORRIBLE</em></li>
- </ol>
- <p>Devinette : qu'affiche l'instruction suivante ? (on ne
- connaît pas encore PHP mais on peut utiliser son intuition)</p>
- <code> echo 013 + "013 c'est en fait 11 en base 8"; </code>
- <ul style="background:white">
- <li>013</li>
- <li>13</li>
- <li>013 c'est en fait 11 en base 8</li>
- <li>013013 c'est en fait 11 en base 8</li>
- <li>13013 c'est en fait 11 en base 8</li>
- <li><span style="position:relative;"> <span class="sws-onframe-0"
- style="position:absolute;
- left:0;">24</span><span class="sws-onframe-1-2"
- style="position:absolute;
- left:0;"><em>24 ✔✔✔</em></span></span></li>
- <li>une erreur</li>
- <li>autre chose</li>
- </ul>
- </div>
- <h1>Types de base et expressions simples</h1>
- <div class="sws-slide">
- <h1>Entiers (<tt>integer</tt>)</h1>
- <p>Les entiers ont une taille fixe (généralement 32bits) : </p>
- <table class="desc">
- <tr><td>Notation décimale</td><td>10, 3444, -25, 42,
- …</td></tr>
- <tr><td>Notation binaire</td><td>0b10, -0b10001010,
- …</td></tr>
- <tr><td>Notation octale</td><td>0755, -01234567, …</td></tr>
- <tr><td>Notation hexadécimale</td><td>0x12b, -0xb00b5,
- 0xd34db33f, …</td></tr>
- </table>
- <p>Opérateurs arithmétiques : </p>
- <table class="desc">
- <tr><td>-</td><td> « Moins » unaire </td></tr>
- <tr><td>+, -, *, % </td><td>addition, soustraction, produit, modulo</td></tr>
- <tr><td><span style="color:red">/</span></td><td>Division. Si
- <tt>x</tt> et <tt>y</tt> sont des entiers et que <tt>y</tt>
- divise <tt>x</tt> alors <tt>x/y</tt> renvoie
- un <em style="color:red">entier</em> sinon <tt>x/y</tt> renvoie
- un <em style="color:red">flottant</em>!
- </td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Booléens (<tt>boolean</tt>)</h1>
- <table class="desc">
- <tr><td>TRUE/FALSE</td><td>vrai/faux (en majuscules)</td></tr>
- </table>
- <p>Opérateurs logiques :</p>
- <table class="desc">
- <tr><td>!</td><td> négation (unaire) </td></tr>
- <tr><td>&&, || </td><td>« et » logique, « ou » logique</td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Flottants (<tt>float</tt>)</h1>
- <table class="desc">
- <tr><td>Notation scientifique</td><td>1.3, 0.99, 00.34e102, -2313.2313E-23,
- …</td></tr>
- </table>
- <p>Opérateurs arithmétiques : </p>
- <table class="desc">
- <tr><td>-</td><td> « Moins » unaire </td></tr>
- <tr><td>+, -, *, /, % </td><td>opérations standard</td></tr>
- <tr><td>abs, sin, cos, sqrt, pow, …</td><td>fonctions
- mathématiques pré-définies </td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Variables, affectations</h1>
- <ul>
- <li>Un nom de variable commence toujours
- par <tt><em>$</em></tt></li>
- <li>Pas besoin de donner le type, l'affectation détermine le
- type</li>
- </ul>
- <p>Exemples :</p>
- <code> $foo = 123;
- $bar = 1323e99;
- $_toto = $bar;
-</code>
- </div>
- <div class="sws-slide">
- <h1>Chaînes de caractères (<tt>string</tt>)</h1>
- <table class="desc">
- <tr><td>Simples quotes</td><td> <tt>'foo'</tt>, <tt>'c\'est
- moi'</tt>, <tt>'Un antislash : \\'</tt>, …<br/>
- <em style="color:orange">Pas d'autre séquence d'échappement</em>
- </td></tr>
- <tr><td style="width:8em;">Doubles quotes</td><td><tt>"foo"</tt>, <tt>"c'est
- moi"</tt>, <tt>"Un retour chariot: \n"</tt>, <tt>"La variable
- \$toto contient: $toto"</tt><br/>
- <em style="color:orange">Les séquences d'échapement sont:
- \n, \t, \\, \", \$. Les variables (sous-chaînes
- commençant par un $) sont remplacées par leur valeur.
- </em>
- </td></tr>
- </table>
- <p>Opérations sur les chaînes : </p>
- <table class="desc">
- <tr><td>$foo[10]</td><td> accès au 11<sup>ème</sup> caractère </td></tr>
- <tr><td>$foo[10] = 'A';</td><td> mise à jour</td></tr>
- <tr><td> . </td><td>concaténation</td></tr>
- <tr><td>strlen</td><td>longueur</td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Tableaux (<tt>array</tt>)</h1>
- <p>Les tableaux sont des tableaux <em>associatifs</em> : </p>
- <table class="desc" >
- <tr><td>array()</td><td>crée un tableau vide</td></tr>
- <tr><td style="width:14.5em;">array(<tt>k<sub>1</sub> => v<sub>1</sub>, …,
- k<sub>n</sub> => v<sub>n</sub> </tt>)</td>
- <td>créé un nouveau tableau pour lequel
- l'entrée <tt>k<sub>i</sub></tt> est associée à la
- valeur <tt>v<sub>i</sub></tt>
- </td>
- </tr>
- <tr><td>array(<tt>v<sub>1</sub>, …, v<sub>n</sub> </tt>)</td>
- <td>créé un nouveau tableau pour lequel
- l'entier <tt>i-1</tt>
- valeur <tt>v<sub>i</sub></tt>
- </td>
- </tr>
- </table>
- <p>Quelques fonctions : </p>
- <table class="desc" style="background:white;">
- <tr><td style="width:7em;">count</td><td> taille du tableau (nombre d'éléments)</td></tr>
- <tr><td>sort, rsort</td><td> trie un tableau (<tt>rsort</tt> trie par
- ordre décroissant) par valeurs. Les clés sont supprimées et
- de nouvelles clées de 0 à longueur - 1 sont crées</td></tr>
- <tr><td>ksort, krsort</td><td>trie un tableau par
- clés</td></tr>
- <tr><td>print_r</td><td>affiche un tableau (ne pas utiliser <tt>echo</tt>)</td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Tableaux (exemples)</h1>
- <code> $tab1 = <em>array()</em>; //tableau vide
- $tab2 = <em>array("zero", "un", "deux", "trois");</em>
- $tab3 = <em>array("pi" => 3.14159, "e" => 2.71828; "phi" => 1.61803)</em>;
- echo <em>$tab2[0]</em>; //affiche zero
- echo <em>$tab3["phi"]</em>; //affiche 1.61803
- <em>$tab1["dix"] = 10</em>; //affectation
- <em>sort($tab2)</em>;
- echo <em>$tab2[0]</em>;//affiche deux
- <em>sort($tab3)</em>;
- echo $tab3[0]; //affiche 1.61803
- echo $tab3[1]; //affiche 2.71828
- echo $tab3[2]; //affiche 3.14159
- echo <em>count($tab2)</em>; //affiche 4 </code>
- </div>
- <div class="sws-slide">
- <h1>NULL</h1>
- <p><em>NULL</em> est une <em>constante</em> spéciale, de
- type <em>NULL</em>. C'est la valeur d'une variable non déclarée
- ou d'un accès invalide dans un tableau.</p>
- <code> $a = $b; // $b n'est pas déclarée, $a reçoit NULL
- $c = $tab["toto"]; // $tab existe mais n'a pas de valeur
- // associée à la clé "toto", $c reçoit NULL
- </code>
- </div>
- <div class="sws-slide">
- <h1>Conversions de types</h1>
- <p><span style="color:red;">☠☢☣☹</span> :
-les conversions se
- font <em style="color:red;">implicitement</em>, en fonction du
- contexte.
- </p>
- <table class="desc">
- <tr> <td style="width:5em;">Booléen</td> <td>0, 0.0, "", "0", <tt>NULL</tt>, et le tableau
- vide sont convertis en <tt>FALSE</tt>, le reste
- en <tt>TRUE</tt> (en particulier "00" vaut <tt>TRUE</tt>
- ☹)</td> </tr>
- <tr><td>Entier</td><td> <tt>FALSE</tt> ⇝ 0, <tt>TRUE</tt> ⇝ 1,
- les flottants sont arrondis par partie entière (1.23242 ⇝
- 1). Les chaînes <em style="color:red">dont un préfixe</em>
- est un entier sont converties en cet entier, sinon en 0 ("123
- bonjour" ⇝ 123) </td>
- </tr>
- <tr><td>Chaîne</td> <td> La chaîne contient la représentation
- de la valeur (<tt> 1 . "ABC" </tt>
- ⇝ <tt>"1ABC"</tt>). <tt>FALSE</tt> et <tt>NULL</tt> sont
- convertis en <tt>""</tt>, <tt>TRUE</tt> converti en <tt>"1"</tt></td></tr>
- </table>
- <p> La réponse à la devinette : 013 + "013 c'est 11 en octal" : </p>
- <ul style="background:white;">
- <li> 013 ⇝ notation octale pour l'entier décimal 11 </li>
- <li> "013 c'est 11 en octal" chaîne de caractères utilisées
- dans une addition (contexte entier), le préfixe "013" est
- transformé en <span style="color:red">décimal</span> 13</li>
- <li> 11 + 13 ⇝ 24 (ça au moins ça a du sens)</li>
- </ul>
-
- </div>
- <div class="sws-slide">
- <h1>Comparaisons</h1>
- <p>Opérateurs de comparaisons</p>
- <table class="simple">
- <tr><td style="width:2em;"><em>Opérateur</em></td> <td style="width:13em;"><em>Description</em></td></tr>
- <tr><td><tt> $a == $b </tt></td> <td >Égal, après conversion
- de type </td></tr>
- <tr><td><tt> $a != $b </tt></td> <td>Différent, après conversion
- de type
- </td></tr>
- <tr><td><tt> $a === $b </tt></td> <td>Égal et de même type
- </td></tr>
- <tr><td><tt> $a !== $b </tt></td> <td>Différent ou de type différent
- </td></tr>
- <tr><td><tt> $a < $b </tt></td> <td>Strictement plus petit,
- après conversion de type
- </td></tr>
- <tr><td><tt> $a > $b </tt></td> <td>Strictement plus grand,
- après conversion de type
- </td></tr>
- <tr><td><tt> $a <= $b </tt></td> <td>Plus petit,
- après conversion de type
- </td></tr>
- <tr><td><tt> $a >= $b </tt></td> <td>Plus grand,
- après conversion de type
- </td></tr>
- </table>
- <p>On comparera <em style="color:red;">TOUJOURS</em> des valeurs
- de <em style="color:red;">MÊME TYPE</em></p>
- </div>
- <div class="sws-slide">
- <h1>Affichage</h1>
- <p>On utilise l'instruction <tt><em>echo</em></tt> pour écrire
- du texte dans la page HTML résultante : </p>
- <table class="simple" border="1" style="margin-left:10vh; border-collapse:collapse;border-spacing: 2pt 2pt" >
- <tr style="boder-width:0pt 0pt 3pt 0pt;
- border-color: gray;
- border-style: solid " >
- <td style="width: 10em;"><em>Code PHP</em></td>
- <td style="width: 7em;" ><em>Code HTML</em></td>
- <td><em>Affichage dans le navigateur</em></td>
- </tr>
- <tr>
- <td><tt>echo "Hello";<br/>
- echo "World";</tt></td>
- <td> HelloWorld</td>
- <td>HelloWorld</td></tr>
- <tr>
- <td><tt>echo "Hello\n";<br/>
- echo "World";</tt></td>
- <td> Hello<br/>World</td>
- <td>Hello World</td></tr>
- <tr><td><tt>echo "Hello<br/>";<br/>
- echo "World";</tt></td>
- <td> Hello<tt><br/></tt>World</td>
- <td>Hello<br/>World</td></tr>
- </table>
- </div>
- <h1>Structures de contrôle</h1>
- <div class="sws-slide">
- <h1>Conditionnelle: <tt>if else</tt></h1>
- <code>
- <em>if (</em> c <em>) {</em>
- // cas then
- <em> } else { </em>
- // cas else
- <em>};</em>
- </code>
- <p>Les <em>parenthèses</em> autour de la condition <tt>c</tt> sont
- obligatoires. La branche <tt><em>else { … }</em></tt> est
- optionnelle. Les accolades sont optionnelles pour les blocs
- d'une seule instruction</p>
- </div>
- <div class="sws-slide">
- <h1>Boucles</h1>
- <div class="sws-pause">
- <code> <em>while (</em> c <em>) {</em>
- //corps de la boucle while
- <em>};</em></code>
- </div>
- <div class="sws-pause">
- <code>
- <em>do {</em>
- //corps de la boucle do
- <em>} while (</em> c <em>);</em></code>
- </div>
-
- <div class="sws-pause">
- <code>
- <em>for(init ; test ; incr) {</em>
- //corps de la boucle for
- <em>};</em></code>
- </div>
- <div class="sws-pause">
- <code>
- <em>foreach($tab as $key => $val) {</em>
- //corps de la boucle foreach
- //$tab est un tableau, $key une clé et $val la valeur associée
- <em>};</em></code>
- </div>
- <p style="background:white;">Remarque: <tt>ksort</tt> et <tt>krsort</tt> influencent
- l'ordre de parcours par une boucle <tt>foreach</tt></p>
- </div>
- <div class="sws-slide">
- <h1><tt>break</tt> et <tt>continue</tt></h1>
- <table class="desc">
- <tr><td><tt>break</tt></td>
- <td>sort de la boucle
- immédiatement</td> </tr>
- <tr> <td><tt>continue</tt></td> <td>reprend à l'itération
- suivante</td>
- </tr>
- </table>
- <code>
- for($i = 0; $i < 10; $i = $i + 1){
- if ($i == 2 || $i == 4) continue;
- if ($i == 7) break;
- echo $i . ' ';
- }
- </code>
- <p>Affiche 0 1 3 5 6</p>
- </div>
- <h1>Passage de paramètres depuis une page</h1>
- <div class="sws-slide">
- <h1>Formulaire HTML (version simple)</h1>
- <p>L'élément <tt><em><form></em></tt> permet de créer des formulaires HTML. Un
-formulaire est constitué d'un ensemble de widgets (zones de saisies
-de textes, boutons, listes déroulantes, cases à cocher, ... ) et d'un
-bouton submit. Lorsque l'utilisateur appuie sur le bouton, les
-données du formulaires sont envoyées au serveur. Exemple, fichier
-<tt>age.html</tt> :</p>
-<code><![CDATA[
- <html>
- <body>
- <form method="get" action="calcul.php">
- Entrez votre année de naissance: <input type="text" name="val_age"/>
- <input type="submit" />
- </form>
- </body>
- </html>
- ]]></code>
-</div>
-<div class="sws-slide">
- <h1>Paramètres</h1>
- <p>
- Les paramètres envoyés au serveur web par la méthode <tt>get</tt>, sont
- accessibles en PHP dans la variable globale <tt><em>$_GET</em></tt>. C'est un tableau
- qui associe au nom d'un input sa valeur.
- Exemple : <tt>calcul.php</tt></p>
-<code><![CDATA[
- <html>
- <body>
- <?php
- echo "Vous êtes né il y a ";
- echo "<b>";
- echo date("Y") - ]]><em>$_GET["val_age"]</em><![CDATA[;
- echo "</b> ans";
- echo "<br/>";
- ?>
- </body>
- </html>
- ]]></code>
-</div>
- </body>
-
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>PHP : Fonctions</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
- <script src="../libs/raphael-min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="prog_internet_06.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 7</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <h1>Définitions de fonctions</h1>
-
- <div class="sws-slide">
- <h1>Fonctions</h1>
- <p>Les fonctions sont déclarées à l'aide du
- mot-clé <tt><em>function</em></tt>. On renvoie des résultats à
- l'aide du mot-clé <tt><em>return</em></tt>.</p>
- <code><![CDATA[
- <?php
- ]]><em>function</em> double ($x)
- <em>{</em>
- <em>return</em> $x + $x;
- <em>}</em>
-
- echo double(10);
- <![CDATA[?>]]>
- </code>
- </div>
-
-
- <div class="sws-slide">
- <h1>Portée des variables locales et globales
- <b style="color:red">⚠</b>
- </h1>
- <div id="cont2" style="width:100%;position:relative;"
- onresize="draw_arrows();" >
- <div id="left2" style="display:inline-block;width:50%; position:relative;
- box-sizing:border-box;
- padding: 0 1em 0 2em;
- border-style:dashed;
- border-width: 0 1pt 0 0;
- border-color:gray; float:left;">
-<code> <?php
- <em style="color:red">$a</em> = 42;
- function add_a($x)
- {
- <span id="leftend" />
- return $x + <em style="color:red">$a</em>;<span id="leftstart" />
- }
- echo add_a(10);
- ?>
-</code>
- </div>
- <div id="right2" style="display:inline-block;
- width:50%; position:relative;
- box-sizing:border-box;
- padding: 0 2em 0 1em;
- vertical-align:text-top;
- ">
-<code > <?php
- <em>$a</em> = 42;<span id="rightend"/>
- function add_a($x)
- {
- <em>global $a</em>;<span id="rightmid"/>
- return $x + <em>$a</em>;<span id="rightstart"/>
- }
- echo add_a(10);
- ?>
-</code>
- </div>
- </div>
-
- <script type="text/javascript">
-
- function overlay(id) {
- var w = $("#" + id)[0].offsetWidth;
- var h = $("#" + id)[0].offsetHeight;
- $("#svg_"+id).remove();
- var paper = Raphael(id, w, h);
- paper.canvas.id = "svg_" + id;
- return paper;
- };
-
- function curve_to(paper, start, end, style) {
- var x1 = $(start)[0].offsetLeft;
- var y1 = $(start)[0].offsetTop;
- var x2 = $(end)[0].offsetLeft;
- var y2 = $(end)[0].offsetTop;
-
- var path_cmd =
- "M" + x1 + " " + y1 + " S" + x1 + " " + y2 + " " + x2 + " " + y2;
- var p1 = paper.path(path_cmd);
- p1.attr(style);
-
- };
-
- function draw_arrows(x) {
-
- var paper = overlay("left2");
- $("#svg_left2").css ( { 'z-index': '2', 'top':'0', 'left':'0', 'position':'absolute' } );
-
- curve_to (paper, "#leftstart", "#leftend", { 'stroke': "red",
- 'stroke-dasharray' : "-",
- 'stroke-width': 2,
- 'arrow-end' : "block-wide-long" });
-
- var paper = overlay("right2");
- $("#svg_right2").css({ 'z-index': '2', 'top':'0', 'right':'0', 'position':'absolute' });
-
- curve_to (paper, "#rightstart", "#rightmid", { 'stroke': "green",
- 'stroke-width': 2,
- 'arrow-end' : "block-wide-long" });
- curve_to (paper, "#rightmid", "#rightend", { 'stroke': "green",
- 'stroke-width': 2,
- 'arrow-end' : "block-wide-long" });
- };
- SWS.Presentation.registerCallback(0, draw_arrows);
- </script>
- <p>Le code de gauche <em style="color:red">affiche 10</em> !
- Les variables ont une portée <em style="color:red">locale</em>
- par défaut. Si <tt>$a</tt> n'est pas définie dans le corps de la
- fonction, sa valeur est <tt style="color:red">NULL</tt>
- (variable non définie). <span >Pour référencer
- des variables globales, on utilise le mot clé <tt><em>global</em></tt>.</span>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Fonction : définition <b style="color:red">⚠</b></h1>
- <p>On peut utiliser une fonction <s>« avant »</s> de la définir :</p>
- <code> <?php
- echo next(10);
- echo <br/>;
-
- function next($x)
- {
- return $x + 1;
- }
- ?></code>
- <p>On définira <em>toujours</em> des fonctions <em>avant</em> de
- les utiliser. On ne peut pas définir deux fonctions avec le même
- nom.
- </p>
- </div>
- <div class="sws-slide">
- <h1>Fonctions : passage par référence</h1>
- <p>On utiliser le modificateur <tt><em>&</em></tt> devant
- un paramètre de fonction pour indiquer que ce dernier est passé
- par référence.</p>
- <div class="twocol">
- <div>
- <code><?php
- function add_a($tab)
- {
- $tab["a"] = 42;
- }
-
- $mytab = array();
- add_a($mytab);
- echo $mytab["a"];
- //<s>n'affiche rien (car NULL ⇝ "")</s>
-?></code>
- </div>
- <div>
- <code><?php
- function add_a(<em>&</em>$tab)
- {
- $tab["a"] = 42;
- }
-
- $mytab = array();
- add_a($mytab);
- echo $mytab["a"];
- //<em>affiche 42</em>
-?></code>
- </div>
-
- </div>
- <p>Lorsque l'on veut <em>modifier</em> un argument de la
- fonction (plutot que de renvoyer une version modifiée, par
- ex. mise à jour d'un tableau, d'une chaîne, …), on doit le
- passer par référence.
- </p>
- </div>
- <h1>Manipulation des chaînes et expressions régulières</h1>
- <div class="sws-slide">
- <h1>Quelques fonctions utilitaires sur les chaînes</h1>
- <dl>
- <dt><tt>explode($delim, $entree)</tt></dt>
- <dd>Découpe la chaîne <tt>$entre
-e</tt> suivant la
- sous-chaîne <tt>$delim</tt> et renvoie les morceaux dans un
- tableau.</dd>
- <dt><tt>implode($delim, $tab)</tt></dt>
- <dd>Réunit les chaînes se trouvant dans le
- tableau <tt>$tab</tt> en les séparant par la
- chaîne <tt>$delim</tt>.
- </dd>
- <dt><tt>ltrim($entree)</tt></dt>
- <dd>Retire les caractères blancs en début de chaîne.</dd>
- <dt><tt>rtrim($entree)</tt></dt>
- <dd>Retire les caractères blancs en fin de chaîne.</dd>
- <dt><tt>trim($entree)</tt></dt>
- <dd>Retire les caractères blancs en début et en fin de
- chaîne.</dd>
- <dt><tt>htmlspecialchars($entree)</tt></dt>
- <dd>converti les caractères <tt>&</tt>, <tt>"</tt>,
- <tt>'</tt>, <tt><</tt> et <tt>></tt> en
- <tt>&amp;</tt>, <tt>&quot;</tt>,
- <tt>&apos;</tt>, <tt>&lt;</tt> et <tt>&gt;</tt>.
- </dd>
-
- </dl>
- </div>
- <div class="sws-slide">
- <h1>Expressions régulières : syntaxe</h1>
- <p>Les expressions régulières de PHP sont au format PCRE (Perl
- Common Regular Expressions) <tt><em>'/r/'</em></tt>
- où <tt>r</tt> est une expression de la forme:</p>
-<code> <table style="margin:0em 2em">
- <tr>
- <td>r ::=</td> <td> <it>a</it> </td> <td> (un caractère)</td></tr>
- <tr><td> |</td> <td> <em>.</em></td> <td> (n'importe quel caractère)</td></tr>
- <tr><td> |</td><td> r<sub>1</sub> <em>|</em> r<sub>2</sub></td> <td> (r<sub>1</sub> ou r<sub>2</sub>)</td></tr>
- <tr><td> |</td><td> r<em>?</em></td><td> (r répétée au plus 1 fois)</td></tr>
- <tr><td> |</td><td> r<em>*</em></td><td> (r répétée 0 fois ou plus)</td></tr>
- <tr><td> |</td><td> r<em>+</em></td><td> (r répétée 1 fois ou plus)</td></tr>
- <tr><td> |</td><td> <em>[</em>c<sub>1</sub> … c<sub>n</sub><em>]</em></td> <td> (un caractère parmis c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
- <tr><td> |</td><td> <em>[</em>c<sub>1</sub><em>-</em>c<sub>n</sub><em>]</em></td> <td> (un caractère parmis c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
- <tr><td> |</td><td> <em>[^</em>c<sub>1</sub> … c<sub>n</sub><em>]</em></td> <td> (un caractère sauf c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
- <tr><td> |</td><td> <em>[^</em>c<sub>1</sub><em>-</em>c<sub>n</sub><em>]</em></td> <td> (un caractère sauf c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
- <tr><td> |</td> <td> <em>^</em></td> <td> (début de texte)</td></tr>
- <tr><td> |</td> <td> <em>$</em></td> <td> (fin de texte)</td></tr>
- <tr><td> |</td> <td> <em>(</em>r<em>)</em></td> <td> (r elle même)</td></tr>
-
-<!-- | <em>(</em>r<em>)</em> (r elle même)
--->
-</table>
-</code>
- </div>
-<div class="sws-slide">
- <h1>Expressions régulières : recherche</h1>
- <code style="text-align:center"> <em>preg_match</em>($regexp, $chaine)</code>
- <p>renvoie <em>1</em> si une sous-chaine de <tt>$chaine</tt>
- correspond à <tt>$regexp</tt>, <em>0</em> si aucune sous-chaine ne correspond
- et <s><tt>FALSE</tt></s> en cas de problème (attention,
- utiliser <tt>===</tt> pour tester le résultat).
-</p>
-<code style="margin: 0em 2em"><?php
- $chaine = "ABCDEFABCDEF";
- echo preg_match(<em>'/ABC/'</em>, $chaine); // affiche 1
- echo preg_match(<em>'/DEF/'</em>, $chaine); // affiche 1
- echo preg_match(<em>'/^ABC/'</em>, $chaine); // affiche 1
- echo preg_match(<em>'/^DEF/'</em>, $chaine); // affiche 0
- echo preg_match(<em>'/ABC$/'</em>, $chaine); // affiche 0
- echo preg_match(<em>'/DEF$/'</em>, $chaine); // affiche 1
- echo preg_match(<em>'/(ABC...)+/'</em>, $chaine); // affiche 1
- echo preg_match(<em>'/[^A-Z]+/'</em>); // affiche 0
- echo preg_match(<em>'/[^A-Z]*/'</em>); // affiche 1 !
- echo preg_match(<em>'/^[^A-Z]*$/'</em>); // affiche 0
-?></code>
-</div>
-<div class="sws-slide">
- <h1>Expressions régulières : substitution</h1>
- <code style="text-align:center"> <em>preg_replace</em>($regexp, $motif, $chaine)</code>
- <p>recherche toutes les sous-chaînes de <tt>$chaine</tt> reconnues
- par <tt>$regexp</tt> et les remplace par <tt>$motif</tt>. Ce dernier
- peut contenir <tt>$<em>i</em></tt> pour référencer
- le <em>i<sup>ème</sup></em> groupe de parenthèses</p>
- <code style="margin: 0em 2em;background:white;"><?php
- $chaine = "<em>10</em>-<s>31</s>-<s style='color:blue'>1981</s>";
- $reg1 = "/<em>(</em>[0-9]+<em>)</em>-<s>(</s>[0-9]+<s>)</s>-<s style='color:blue'>(</s>[0-9]+<s style='color:blue'>)</s>/";
- echo preg_replace($reg1, "<em>$2</em>/<s>$1</s>/<s style='color:blue'>$3</s>", $chaine);
- // affiche 31/10/1981
-
- $reg2 = "/1/";
- echo preg_replace($reg2, "toto", $chaine);
- // affiche toto0-3toto-toto98toto
-
- $reg3 = "/[0-9]([0-9]*)/"
- echo preg_replace($reg3, "$1", $chaine);
- // affiche 0-1-981 (* déplie la regexp le plus possible)
-?></code>
-</div>
-<div class="sws-slide">
- <h1>Expressions régulières : séparation</h1>
- <code style="text-align:center"> <em>preg_split</em>($regexp, $chaine)</code>
- <p>renvoie un tableau des sous-chaine de <tt>$chaine</tt> séparées
- par <tt>$motif</tt> (équivalent à <tt>explode</tt> pour
- des <tt>$regexp</tt> constantes).</p>
- <code style="margin: 0em 2em;background:white;"><?php
- $chaine = "Une phrase, c'est plusieurs mots.";
- print_r (preg_split("/[ ,.']+/", $chaine));
- //Affiche:
- //Array ( [0] => Une [1] => phrase [2] => c [3] => est
- // [4] => plusieurs [5] => mots [6] => )
-?></code>
-</div>
-<div class="sws-slide">
- <h1>Expressions régulières : recherche exhaustive</h1>
-
- <code style="text-align:center"> <em>preg_match_all</em>($regexp, $chaine, &$resultat)</code>
- <p><tt><em>&$resultat</em></tt> est un tableau <em>passé par
- référence</em>. Après l'appel, <tt>$resultat[0]</tt> contient un
- tableau avec <em>toutes</em> les sous-chaines reconnues
- et <tt>$resultat[i]</tt> contient tous les résultats reconnus par le
- i<sup>ème</sup> groupe de parenthèses. Renvoie le nombre de chaines
- trouvées (<i>i.e.</i> la longueur de <tt>$resultat[0]</tt>).
-</p>
- <code style="margin: 0em 2em;background:white;"><?php
- $res = array();
- $chaine = "ABC ACD AEF AB DEF";
- echo preg_match_all("/A([A-Z]*)/", $chaine, $res);
- //Affiche 4
- print_r ($res);
- /*Affiche
- Array ( [0] =>
- Array ( [0] => ABC [1] => ACD [2] => AEF [4] => AB)
- [1] =>
- Array ( [0] => BC [1] => CD [2] => EF [4] => B)
- )
-*/?></code>
-</div>
-<h1>Manipulation de fichiers</h1>
-<div class="sws-slide">
- <h1>Envoi d'un fichier au serveur (1/2)</h1>
- <p>On utilise la méthode <tt><em>post</em></tt> pour les
- formulaires. Les valeurs sont envoyées dans la requête HTTP (et non
- pas encodées dans l'URL)</p>
- <code>
- <form action="cible.php" <em>method="post"</em>
- <em>enctype="multipart/form-data"</em>>
- <input <em>type="file" <s>name="fichier"</s></em> size="20"/>
- <button type="sumbit">Uploader le fichier</button>
- </form>
-</code>
-<p>Apperçu:</p><form style="margin: 0em 1em" action="" method="post"
- enctype="multipart/form-data">
- <input type="file" name="fichier" size="20"/>
- <button type="submit">Uploader le fichier</button>
-</form>
-<p>Coté serveur, la variable <tt><em>$_FILES</em></tt> est
- définie. <tt><em>$_FILES[<s>"fichier"</s>]</em></tt> contient un
- tableau avec des informations sur le fichier envoyé. Les autres
- champs (par exemple valeur d'un champ texte) sont stockés dans la
- variable <tt>$_POST</tt> (au lieu de <tt>$_GET</tt>).
-</p>
-</div>
-<div class="sws-slide">
- <h1>Envoi d'un fichier au serveur (2/2)</h1>
- <p>Étant donné un formulaire avec un champ <i>input</i> de
- type <i>file</i> et de nom <tt>"fichier"</tt> on a accès aux
- information suivantes:</p>
- <dl>
- <dt><tt>$_FILES["fichier"]["error"]</tt></dt> <dd>Code d'erreur
- (0 si tout c'est bien passé, <tt>></tt> 0 si une erreur s'est produite. Les
- autres champs ne sont définis que si "error" vaut 0).
- </dd>
- <dt><tt>$_FILES["fichier"]["tmp_name"]</tt></dt><dd>Nom du fichier
- temporaire sur le serveur où a été sauvegardé le contenu du
- fichier envoyé</dd>
- <dt><tt>$_FILES["fichier"]["name"]</tt></dt><dd>Nom original du fichier</dd>
- <dt><tt>$_FILES["fichier"]["size"]</tt></dt><dd>Taille du
- fichier</dd>
- <dt><tt>$_FILES["fichier"]["type"]</tt></dt><dd>Le type MIME du fichier</dd>
- </dl>
-</div>
-<div class="sws-slide">
- <h1>Ouverture d'un fichier</h1>
-<code style="text-align:center"> <em>fopen</em>($nomfichier, $mode)</code>
-<p>Ouvre un fichier dont on donne le nom avec un <i>mode</i>
- particulier. Les modes sont: <em><tt>"r"</tt></em>
- (lecture), <em><tt>"r+"</tt></em> (lecture/écriture),
- <em><tt>"w"</tt></em> (écriture),
- <em><tt>"w+"</tt></em> (lecture/écriture, création si non-existant),
- <em><tt>"a"</tt></em> (écriture, ajout à la fin si existant),
- <em><tt>"a+"</tt></em> (lecture/écriture, création si non-existant,
- ajout à la fin si existant). <em><tt>fopen</tt></em> renvoie un
- descripteur de fichier que l'on peut utiliser pour manipuler le
- fichier.
-</p>.
-</div>
-<div class="sws-slide">
- <h1>Lecture/écriture/fermeture d'un fichier</h1>
-<code style="text-align:center"> <em>fread</em>($desc, $taille)</code>
-<p>Lit au maximum <em><tt>$taille</tt></em> caractères dans un fichier
- dont le descripteur (renvoyé par <tt>fopen</tt>)
- est <tt>$desc</tt>. La fonction renvoie un chaine d'au
- plus <tt>$taille</tt> caractères ou <tt>FALSE</tt> en cas d'erreur.
-</p>
-<code style="text-align:center"> <em>fwrite</em>($desc, $chaine)</code>
-<p>Écrit la chaine de caractères à la position courante dans le
- fichier dont le descripteur est <tt>$desc</tt>. Renvoi le nombre
- d'octets écrits ou <tt>FALSE</tt> en cas d'erreur.
-</p>
-<code style="text-align:center"> <em>fclose</em>($desc)</code>
-<p>Ferme le fichier dont le descripteur est <tt>$desc</tt>
-</p>
-</div>
-<div class="sws-slide">
- <h1>Déplacement dans un fichier</h1>
- <code style="text-align:center"> <em>fseek</em>($desc, $offset, $orig)</code>
- <p>Déplace le pointeur interne de position du fichier dont le
- descripteur est <tt>$desc</tt> de <tt>$offset</tt> octets. Le
- paramètre <tt>$orig</tt> donne l'origine: <tt>SEEK_CUR</tt>
- (décalage à partir de la position courante), <tt>SEEK_SET</tt>
- (position absolue dans le fichier), <tt>SEEK_END</tt> (décalage à
- partir de la fin de fichier).
-</p>
-</div>
-<div class="sws-slide">
-<h1>Interface simplifiée</h1>
-<code style="text-align:center"> <em>file_get_contents</em>($nomfichier)</code>
-<p>Ouvre un fichier dont on donne le nom et renvoie son contenu sous
- forme d'une chaine de caractères</p>
-<code style="text-align:center"> <em>file</em>($nomfichier)</code>
-<p>Renvoie un tableau avec une case par ligne dans le fichier. Chaque
- entrée contient le "\n" terminal.</p>
-</div>
- </body>
-
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>PHP : Sessions et persistance</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
- <script src="../libs/raphael-min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="prog_internet_07.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 8</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <h1>En-tête de requêtes HTTP</h1>
-
- <div class="sws-slide">
- <h1>Retour sur le protocole HTTP</h1>
- <ul><li><em>Client : </em>
-<code>GET <em>/~kn/index.html</em> HTTP/1.1
-Host: www.lri.fr
-</code> </li>
-<li><em>Serveur : </em><br/>
- <code style="display:inline-block;width:60%;vertical-align:top;">HTTP/1.1 200 OK
-Server: nginx/1.4.1 (Ubuntu)
-Date: Sun, 17 Nov 2013 16:44:48 GMT
-Content-Type: <em>text/html</em>
-Content-Length: 2038
-<![CDATA[
-<html>
- <head><title>Homepage</title> </head>
- <body>
- …
-]]>
- </code>
-<code style="display:inline-block;
- black;width:30%;vertical-align:top;">} ← <em>code de retour</em>
-
-
-} ← <em>type de contenu</em>
-} ← <em>longueur du contenu</em>
-<span style="font-size:400%;vertical-align:middle;">}</span> <span>←</span> <em>contenu (2038 octets)</em>
-</code>
-</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1>Retour sur le protocole HTTP (2)</h1>
- <ul><li><em>Client : </em>
-<code>GET <em>/~kn/fichier.pdf</em> HTTP/1.1
-Host: www.lri.fr
-</code> </li>
-<li><em>Serveur : </em><br/>
- <code >HTTP/1.1 200 OK
-Server: nginx/1.4.1 (Ubuntu)
-Date: Sun, 17 Nov 2013 16:44:48 GMT
-Content-Type: <em>application/pdf</em>
-Content-Length: 103449
-<![CDATA[
-%PDF-1.2
-%
-8 0 obj
-<</Length 9 0 R/Filter /FlateDecode>>
-stream
-………
- ]]>
- </code>
-
-</li>
- </ul>
- </div>
-<div class="sws-slide">
-<h1>Modifier le <em>content-type</em> en PHP</h1>
-<p>Fichier <tt>notes_csv.php</tt>:</p>
-<code> <?php<em>
- header('Content-type: application/csv');
- header('Content-Disposition: attachement; filename="notes.csv"');</em>
- echo "Nom, Note\n";
- foreach ($NOTES as $nom => $note)
- echo $nom . ", " . $note . "\n";
-
- ?></code>
-<p class="sws-pause"><b style="color:red">⚠ Attention!</b></p>
-<ul>
- <li>Les appels à la fonction <em><tt>header()</tt></em> doivent se
- trouver <s>avant</s> le premier <tt>echo()</tt> du code PHP</li>
- <li>
- Le code PHP doit générer (avec <tt>echo()</tt>) du contenu
- compatible avec le type annoncé (et pas du HTML)
- </li>
-</ul>
-</div>
-
-<div class="sws-slide">
-<h1>Quelques en-tête utiles</h1>
-<p>En tête utilisés par le serveur dans ses réponses</p>
-<dl>
- <dt><tt>Content-type</tt></dt><dd>type MIME du contenu envoyé par le
- serveur</dd>
- <dt><tt>Content-Disposition</tt></dt><dd>permet de mentionner un nom de
- fichier : <em><tt>attachment; filname="foobar.baz"</tt></em></dd>
- <dt><tt>Cache-Control</tt></dt><dd>permet de forcer le client à
- retélécharger la page: <em><tt>no-cache, must-revalidate</tt></em>
- </dd>
- <dt><tt>Last-Modified</tt></dt><dd>date de dernière modification du
- contenu demandé</dd>
-</dl>
-<p>En tête utilisés par le client dans ses requêtes</p>
-<dl>
- <dt><tt>Range</tt></dt><dd>permet de ne récupérer qu'un intervale
- d'octets donné dans un fichier: <em><tt>bytes=500-999</tt></em>
- </dd>
- …
-</dl>
-
-</div>
-<div class="sws-slide">
- <h1>Retour sur le protocole HTTP (3)</h1>
- <p>On rappelle que HTTP est un protocole <em><i>stateless</i></em>
- (sans état, <i>i.e.</i> le serveur Web ne conserve pas d'information
- entre les connexions). Quel problème cela pose-t-il ?</p>
- <ul >
- <li class="sws-pause">Pas de partage d'information entre plusieur
- pages</li>
- <li class="sws-pause">Pas de mécanisme de reprise sur panne
- </li>
- <li class="sws-pause">Pas de persistance de l'information</li>
- <li class="sws-pause">Pas d'authentification (impossible de savoir
- que deux connexions successives ont été faites par le même
- client)</li>
- </ul>
- <p class="sws-pause">⇒ difficle de réaliser une « application »
- moderne répartie sur plusieurs pages</p>
-</div>
-
-<h1>Cookies</h1>
-<div class="sws-slide">
-<h1>Cookies</h1>
-<p>Un <em><i>cookie</i></em> est un packet de données envoyé par le
- serveur, stocké par le client (navigateur Web) et renvoyé au serveur
- lors d'une nouvelle connexion. Les propriétés d'un cookie sont:
-</p>
-<dl>
- <dt>Son nom</dt><dd>une chaîne de caractères</dd>
- <dt>Sa valeur</dt><dd>une chaîne de caraceres</dd>
- <dt>Sa durée de vie</dt><dd>jusqu'à la fin de la « session » ou pour
- une période donnée</dd>
- <dt>Son domaine</dt><dd>Le nom du site web émetteur du cookie</dd>
- <dt>Son chemin</dt><dd>Le sous-répertoire (par rapport à la racine
- du site) pour lequel le cookie est valide</dd>
-</dl>
-<p><b style="color:red">⚠ Attention!</b> seul le domaine qui a
- déposé le cookie est capable de le relire</p>
-</div>
-<div class="sws-slide">
-<h1>Cookies en PHP</h1>
-<p>Créer ou mettre à jour un cookie sur le client:</p>
-<code style="text-justify:center">
- setcookie(<em>$nom</em>, <em>$val</em>, <em>$date</em>);
-</code>
-<dl>
- <dt><tt>$nom</tt></dt><dd>nom du cookie</dd>
- <dt><tt>$val</tt></dt><dd>valeur du cookie</dd>
- <dt><tt>$date</tt></dt><dd>date d'expiration en secondes
- depuis <i>epoch</i> (1<sup>er</sup> janvier 1970 00:00:00)
- ou <tt>NULL</tt> pour une expiration automatique.</dd>
-</dl>
-<p>(on peut récupérer le nombre de secondes depuis <i>epoche</i> avec
- la fonction <tt>time()</tt>).<br/>
- Exemple:
-</p>
-<code> setcookie("mon_cookie", "42", time() + 3600 * 24 * 30);</code>
-</div>
-
-<div class="sws-slide">
- <h1>Cookies en PHP</h1>
- <p>On peut récupérer la valeur d'un cookie depuis PHP:
- </p>
- <code> <em>$_COOKIE["mon_cookie"]</em></code>
- <p>Un cookie <tt>"foo"</tt> existe (<i>i.e.</i> a été défini
- auparavant) si une entrée correspondante existe dans le tableau
- global <em><tt>$_COOKIE</tt></em>. On peut tester qu'une entrée
- existe dans un tableau avec <em><tt>isset()</tt></em>.
- </p>
- <p><b style="color:red">⚠ Attention!</b> </p>
- <ul>
- <li>On ne peut pas écrire dans <em>$_COOKIE</em> (par
- exemple <tt>$_COOKIE["foo"] = 42</tt>), il faut
- utiliser <em><tt>setcookie()</tt></em>.
- </li>
- <li><em><tt>setcookie()</tt></em>
- utilise <em><tt>header()</tt></em> et doit donc être appelé avant
- le premier <em><tt>echo()</tt></em> du fichier.
- </li>
- <li>Pour effacer un cookie, on peut lui donner une date
- d'expiration antérieure à l'instant présent (<tt>0</tt> par exemple)</li>
- </ul>
-</div>
-
-<div class="sws-slide">
- <h1>Avantages et inconvénients des cookies</h1>
-<ul style="list-style-type:none;">
- <li class="sws-pause"><b>+</b> stockage persistant</li>
- <li class="sws-pause"><b>+</b> interface simple d'utilisation (une
- variable pour la lecture et <tt>setcookie</tt> pour l'écriture)</li>
- <li class="sws-pause"><b>-</b> limité en taille </li>
- <li class="sws-pause"><b>-</b> limité en nombre par domaine</li>
- <li class="sws-pause"><b>-</b> type de donnée limité à des chaînes
- (on ne peut pas stocker un tableau PHP par exemple)</li>
-<li class="sws-pause"><b>+/-</b> stocké sur le client</li>
-</ul>
-</div>
-<h1>Sessions</h1>
-<div class="sws-slide">
-<h1>Sessions</h1>
- <p>Une <em>session HTTP</em> est un ensemble de requêtes/réponses HTTP
- entre un serveur et un <em>même</em> client.<br/>
- Exemple d'un sondage en ligne:
- </p>
- <ol> <li>Le visiteur arrive sur la page <tt>q1.php</tt> en cliquant sur
- le lien « commencer le sondage » (<em>Début de session</em>)
- </li>
- <li> Sur <tt>q1.php</tt>, l'utilisateur coche des choix dans un formulaire et appuie
- sur un boutton de soumission qui l'envoie sur <tt>q2.php</tt>
- </li>
- <li>…</li>
- <li> Sur <tt>q10.php</tt>, l'utilisateur coche des choix dans un
- formulaire et appuie sur un bouton de soumission qui l'envoie
- sur <tt>resultat.php</tt></li>
- <li> Sur <tt>resultat.php</tt>, le résultat global du sondage (%
- par question, nombre de participants jusqu'à présent etc...) est
- affiché (<em>Fin de session</em>)
- </li>
- </ol>
-
-</div>
-<div class="sws-slide">
- <h1>Variables de session</h1>
- <p>Pour programmer une application Web, on souhaîte avoir accès à
- des <em>variables de session</em> c'est à dire des variables qui
- sont:
- </p>
- <ul><li>Globale au serveur, et accessibles depuis plusieurs pages
- PHP différentes</li>
- <li>Spécifiques à un « utilisateur » (c'est à dire à une session
- particulière)
- </li>
- </ul>
- <p>Les variables de sessions sont donc propres à chaque client et
- persistent le temp de la session (le temps de session est décidé par
- le serveur)</p>
-</div>
-<div class="sws-slide">
- <h1>Variables de session en PHP</h1>
- <p>On initie une session avec la fonction:</p>
- <code> <em>session_start();</em> </code>
- <p>Une fois appelée, la variable <em><tt>$_SESSION</tt></em>
- contient un tableau que l'on peut utiliser entre plusieurs
- pages. Les valeurs contenues dans le tableau persistent jusqu'à la
- fin de la session. Une session se termine:
- </p>
- <ul><li>Quand le client se déconnecte</li>
- <li>Après un certain temps (« votre session a expiré, veuillez
- vous reconnecter»)</li>
- <li>Quand le code PHP
- appelle <em><tt>session_end();</tt></em></li>
- </ul>
-<p><b style="color:red">⚠
- Attention!</b> <em><tt>session_start()</tt></em> doit être appelé
- avant le premier <tt>echo</tt> du fichier.</p>
-</div>
-<div class="sws-slide">
- <h1>Variables de session en PHP (2)</h1>
-<code style="border: 2pt dashed gray;margin:5pt;">
- <?php /* Fichier page1.php */
- <em>session_start();
- $_SESSION["Valeur"] = 42;</em>
- ?>
- <![CDATA[<html>
- <body>
- Veuillez cliquer sur le <a href=]]><em>"page2.php"</em><![CDATA[>lien</a>
- </body>
- </html>
-]]></code>
-<code style="border: 2pt dashed gray;margin:5pt;"> <![CDATA[<html>
- <body>
- La valeur est <?php]]> <em>echo $_SESSION["Valeur"];</em> <![CDATA[?>
- <!-- affiche 42 -->
- </body>
- </html>
-]]></code>
-</div>
-<div class="sws-slide">
- <h1>Avantages et inconvénients des session</h1>
-<ul style="list-style-type:none;">
- <li class="sws-pause"><b>+</b> Informations stockées sur le serveur</li>
- <li class="sws-pause"><b>+</b> Pas de limite de taille</li>
- <li class="sws-pause"><b>+</b> Pas limité à des chaînes de caractères</li>
- <li class="sws-pause"><b>-</b> Valeurs perdues en fin de session</li>
- <li class="sws-pause"><b>-</b> <s>Nécessite des cookies</s></li>
-</ul>
-</div>
-<div class="sws-slide">
- <h1>Sessions PHP: détails d'implantation</h1>
- <div class="twocol">
- <div><em>Coté client</em><br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-Connexion à une page PHP (envoie du cookie ("php_ssid", "12345"))
-
-
- </div>
- <div><em>Coté serveur (PHP)</em><br/>
- <tt>session_start();</tt><br/>
- - génération d'un ID unique "12345"<br/>
- - dépot d'un cookie "php_ssid", valeur "12345", durée 10 minutes
- - création dans un tableau global d'une entrée:<br/>
- <tt>$_GLOBAL["12345"] = Array();</tt><br/>
- <br/>
- <tt>$_SESSION = $_GLOBAL[$_COOKIE["php_ssid"]]</tt>
- </div>
- </div>
-</div>
-
-<div class="sws-slide">
- <h1>Dans la vraie Vie<sup>TM</sup></h1>
- <p>Mélange de variables de sessions, cookies et bases de données.<br/>
- Scénario réaliste: site de commerce en ligne
- </p>
- <ul>
- <li>Login/mot de passe stocké dans
- une <em style="color:blue;">BD</em> </li>
- <li>Panier courant stocké dans une <em>variable de
- session</em></li>
- <li>Login, date de dernière visite, dernière page visitée stockés
- dans un <em style="color:orange">en cookie</em></li>
- </ul>
- <p class="sws-pause">Pourquoi ?</p>
- <ul>
- <li><em style="color:blue;">BD</em>: information persistante,
- côté serveur (mais la mise à jour, récupération de l'info est
- coûteuse (en temps))
- </li>
- <li><em>Variables de sessions</em> : le panier n'a pas forcément
- besoin d'être conservé entre deux sessions, mais on ne veut pas
- que le client puisse fabriquer un panier frauduleux
- </li>
- <li><em style="color:orange">Cookie</em> : persistante à faible
- coût (stocké sur le client), ce n'est pas grave si les
- informations sont perdues ou corrompues
- </li>
- </ul>
-
- </div>
- </body>
-
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Notions de sécurité sur le Web</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
- <script src="../libs/raphael-min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="prog_internet_08.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
- <h1>Cours 9</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
-
- <h1>Faiblesses d'HTTP</h1>
-
- <div class="sws-slide">
- <h1><i>Disclaimer</i></h1>
- <ul>
- <li>Aborde juste quelques aspects de sécurité</li>
- <li>Essaye de montrer quelques principes fondamentaux</li>
- <li>Uniquement axé sur le Web</li>
- </ul>
- <p><b>⇒</b> Ça ne va pas faire de vous des <i>hackers</i>,
- juste vous sensibiliser aux problèmes de sécurité…
- </p>
- </div>
-
- <div class="sws-slide">
- <h1>Élements de cryptographie (1)</h1>
- <p>Alice et Bob veulent échanger des données
- confidentielles.</p>
- <ol style="list-style-type:none;">
- <li>1. Chiffrement <s>symétrique</s>:
- <ul>
- <li>
- Ils se mettent d'accord sur une <em>clé commune</em>
- </li>
- <li> Alice <em>chiffre</em> son message avec la clé et
- l'envoie à Bob</li>
- <li> Bob déchiffre le message avec <em>la clé</em>
- </li>
- </ul>
- <p class="sws-pause">
- <s>Non sûr</s> (Alice et Bob doivent se mettre d'accord sur une clé en
- « clair », par email par exemple) ou <s>non pratique</s>
- (ils doivent se rencontrer physiquement pour échanger la
- clé).<br/>
- <em>Efficace</em>: on peut implanter plusieurs algorithmes
- de chiffrements en utilisant uniquement des opérations
- logiques de bases
- (<tt>AND</tt>, <tt>OR</tt>, <tt>XOR</tt>). Il est facile de
- les implanter sur des puces dédiées (cartes de crédit,
- processeurs mobiles). Ils sont « sûrs » tant que la clé
- reste secrète.
- </p>
- </li>
- </ol>
- </div>
- <div class="sws-slide">
- <h1>Élements de cryptographie (2)</h1>
- <p>Alice et Bob veulent échanger des données
- confidentielles.</p>
- <ol style="list-style-type:none;">
- <li>2. Chiffrement <em>assymétrique</em>:
- <ul>
- <li>Bob crée une <em>clé
- publique</em> <i>K<sup>B</sup><sub>pub</sub></i>
- et une <em style="color:orange;">clé
- secrète</em> <i>K<sup>B</sup><sub>priv</sub></i>, telle
- que<div style="text-align:center">
- ∀<i>msg</i>, <i>K<sup>B</sup><sub>priv</sub></i>(<i>K<sup>B</sup><sub>pub</sub></i>(<i>msg</i>))
- = <i>K<sup>B</sup><sub>pub</sub></i>(<i>K<sup>B</sup><sub>priv</sub></i>(<i>msg</i>))
- = <i>msg</i>
- </div>
- Bob <em>diffuse</em> sa clé publique (sur sa page Web
- par exemple, ou dans un annuaire de clé) et garde sa clé
- privée <em style="color:orange;">secrète</em>.
- </li>
- <li> Alice <em>chiffre</em> son message <i><s>m</s></i> avec la <em>clé
- publique</em> de Bob
- (<i>K<sup>B</sup><sub>pub</sub></i>(<i>m</i>)) et l'envoie à Bob
- </li>
- <li> Bob
- déchiffre le message avec sa clé
- privée: <i>K<sup>B</sup><sub>priv</sub>(K<sup>B</sup><sub>pub</sub></i>(<i>m</i>))=<s><i>m</i></s>
- </li>
- </ul>
- <p class="sws-pause">
- <s>Sûr et pratique</s> (Bob a généré une paire de clé, et a
- déposé la clé publique sur une page Web)<br/>
- <em>Peu efficace</em>: repose sur des problèmes
- mathématiques difficiles (factorisation de grands entiers,
- courbes eliptiques sur les corps finis). Chiffrer et
- déchiffrer un message n'est pas réaliste pour des grands
- messages (vidéo en streaming, requêtes Web, …).
- </p>
- </li>
- </ol>
- </div>
- <div class="sws-slide">
- <h1>Élements de cryptographie (3)</h1>
- <p>On combine les deux méthodes. (Alice envoie un message à Bob)</p>
- <ul>
- <li>Alice choisit une <s>clé symétrique secrète <i>s</i></s></li>
- <li>Elle l'envoie à Bob en utilisant la clé publique de ce
- dernier (<i>K<sup>B</sup><sub>pub</sub></i>(<i>s</i>))
- </li>
- <li>Bob décrypte le message et
- obtient <s><i>s</i></s>=<i>K<sup>B</sup><sub>priv</sub>(K<sup>B</sup><sub>pub</sub></i>(<i>s</i>))
- </li>
- <li>Bob et Alice se sont mis d'accord <em>de manière sûre</em>
- sur une clé commune <s>s</s>! Ils peuvent utiliser un
- algorithme de chiffrement symétrique pour le reste de la
- conversation
- </li>
- </ul>
- <p><b>⇒</b> Ceci est à la base de protocoles tels que HTTPS</p>
- </div>
-
- <div class="sws-slide">
- <h1>Éléments de cryptographie (4)</h1>
- <p>Le chiffrement assymétrique permet aussi d'avoir <em>la
- preuve</em> que quelqu'un est bien Bob!</p>
- <ul>
- <li>Alice choisit un message secret aléatoire <i><s>m</s></i>,
- sans le divulguer (appelé <i>challenge</i>)
- </li>
- <li>Alice
- calcule <i>K<sup>B</sup><sub>pub</sub>(<i>s</i>)</i> et
- l'envoie à la personne qui prétend être Bob
- </li>
- <li>Seule la personne qui possède la clé privée de Bob (donc
- Bob …) peut déchiffrer le message et renvoyer l'original à
- Alice.
- </li>
- </ul>
- <p> <b>⇒</b> Comment garantir que la personne qui a généré
- les clés <s>au départ</s> est bien Bob ?
- </p>
- </div>
-
- <div class="sws-slide">
- <h1>HTTP: protocole texte « en clair »</h1>
- <p>HTTP est un protocole <em>texte</em>, les données ne sont
- pas chiffrées (cf. TP3) et <em>sans identification</em></p>
- <ul>
- <li><em>Confidentialité</em> : n'importe qui (avec les
- privilèges nécessaires) peut lire ce qui transite entre un client
- et un serveur Web</li>
- <li><em>Authenticité</em> : n'importe qui peut se faire passer
- pour un serveur Web (attaque <i>man in the middle</i>)
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Espionnage de connexion</h1>
- <p>Alice représente le client, Bob le serveur et Eve (<i>Eavesdropper</i>)
- l'attaquante</p>
- <p>On suppose que <s>Eve</s> est <s>root</s> sur la
- machine. Il suffit de lire les paquets qui transitent par la
- carte réseau (<tt>tcpdump</tt> sous Linux).
- </p>
- <ul><li>Eve et Alice sont sur la même machine (démo):
- <div style="text-align:center;vertical-align:middle;"><br/>
- <span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">A
- <s>E</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
- 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">B</span>
-
- </div>
- </li>
- <li>Fonctionne aussi si Eve est sur une machine se trouvant
- sur la route entre Alice et Bob:
- <div style="text-align:center;vertical-align:middle;"><br/>
- <span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">A</span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
- 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;"><s>E</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
- 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">B</span>
-
- </div>
- </li>
- </ul>
- <p>Ce problème touche tous les protocoles en clair: HTTP, POP,
- IMAP, FTP, …. Il peut être résolu grace au <em>chiffrement</em>
- de toute la connexion.</p>
- </div>
- <div class="sws-slide">
- <h1>Attaque <i>Man in the middle</i></h1>
- <p><s>Mallory</s> se place entre Alice (cliente) et Bob (banque), par exemple au
- moyen d'un <em>e-mail</em> frauduleux en HTML:</p>
- <ol> <li> L'émail contient:
- <code><![CDATA[ <html>
- <body>
- Bonjour,
- veuillez vous connecter à votre banque en cliquant ici:
- <a href=']]><s>mallory.com</s>' ><em>www.bob.com</em><![CDATA[</a>
- </body>
-</html>]]></code>
- </li>
- <li>Alice, insouciante, clique sur le lien
- <div style="text-align:center;vertical-align:middle;"><br/>
- <span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">A</span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
- 0 0 0;border-style:dashed; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;"><s>M</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
- 0 0 0;border-style:dashed; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
- 5pt;padding:5pt;font-size:larger;">B</span>
- </div>
- </li>
- <li>Mallory peut retransmettre les requêtes entre Bob et
- Alice, en les modifiant au passage. Le problème est causé
- par un manque d'authentification (Mallory n'a pas a
- prouver à Alice qu'il est Bob)
- </li>
-</ol>
- </div>
- <div class="sws-slide">
- <h1>Solution: HTTPS</h1>
- <p>HTTP <em>Secure</em></p>
- <ol> <li>Respose sur de la cryptographie assymétrique (pour
- l'authentification et le partage de clé) et symétrique (pour le
- chiffrement de connexion)</li>
- <li>Permet d'authentifier les correspondants et de protéger
- les données
- </li>
- <li>Suppose l'existence de <em>tiers de confiance</em> Alice
- et Bob font confiance à Trent (<i>Trusted Third
- Party</i>)</li>
- </ol>
- <p>Bob possède des clés publiques et privées
- (<i>K<sup>B</sup><sub>pub</sub></i>
- et <i>K<sup>B</sup><sub>priv</sub></i>), Trent possède des clés
- publiques et privées (<i>K<sup>T</sup><sub>pub</sub></i>
- et <i>K<sup>T</sup><sub>priv</sub></i>)
- </p>
- </div>
- <div class="sws-slide">
- <h1>HTTPS (détail du protocole)</h1>
- <p>Bob et Trent <em>se rencontrent</em>. Trent <em>signe</em>
- la clé publique de Bob en calculant
- <div style="text-align:center">
- <i>S<sup>B</sup></i>=<i>K<sup>T</sup><sub>priv</sub></i>(<i>K<sup>B</sup><sub>pub</sub></i>)
- </div>
- Comme Trent utilise sa clé <em>privée</em> on sait que seul
- Trent a pu générer cette signature. De plus, Trent
- a <em>rencontré</em> Bob donc il <em>certifie</em> que la
- clé <i>K<sup>B</sup><sub>pub</sub></i> appartient bien à
- quelqu'un nommé Bob.
- </p>
- <ol>
- <li>Alice (client) veut se connecter à Bob. Bob fournit sa
- clé publique <i>K<sup>B</sup><sub>pub</sub></i> et la
- signature <i>S<sup>B</sup></i></li>
- <li> Alice contacte Trent (en qui elle a confiance) et récupère sa clé
- publique <i>K<sup>T</sup><sub>pub</sub></i>. Elle déchiffre la
- signature: <i>K<sup>T</sup><sub>pub</sub></i>(<i>S<sup>B</sup></i>)
- et vérifie qu'elle retombe bien sur la clé publique de Bob.
- </li>
- <li>Elle peut alors choisir une clé symétrique, la chiffrer
- avec <i>K<sup>B</sup><sub>pub</sub></i> et entammer une
- communication <em>chiffrée</em> et <em>authentifiée</em> avec
- Bob.</li>
- </ol>
-</div>
- <div class="sws-slide">
- <h1>Tiers de confiance</h1>
- <p>Les tiers de confiance sont des entités (états, associations,
- compagnies privées) qui se chargent de vérifier les clés
- publiques d'autres entitées. C'est une
- vérification <em>physique</em> (documents administratifs, …).
- </p>
- <div style="text-align:center"><img style="width:70%" src="ssl-cert.png" alt="ssl"/>
- </div>
- <p style="background:white">Cette erreur s'affiche quand une signature n'est pas conforme
- ou n'a pas pu être vérifiée</p>
- </div>
-
- <div class="sws-slide">
- <h1>Tiers de confiance</h1>
- <p>Attaques contre les <em>authorités de certifications</em>
- (tiers de confiance): difficiles, mais pas impossible. Certains
- tiers de confiance sont douteux (états voyous, compagnie
- piratées dont les clées <s>privées</s> sont compromises,…)<br/>
- <s>Attaques d'implémentation</s> (plus probables) : on
- exploite un <s>bug</s> dans le code des serveurs web ou des
- navigateurs<br/>
- <s>Autres faiblesses</s>: HTTPS est en « haut » dans la pile
- IP (application). On peut donc avoir connaissance du nombre de
- paquet échangés, des adresses IP des participants, la taille
- et la fréquence des paquets… (même si on n'en connait pas le
- contenu). Cela permet certaines attaques statisties ou de deni
- de service.
- </p>
- </div>
- <h1>Confidentialité, traîtement des <i>cookies</i></h1>
- <div class="sws-slide">
- <h1>Traçage par cookies</h1>
- <p><i>Normalement</i>, un <em>cookie</em> ne peut être
- lu <em>que</em> que par le site émetteur (cf. cours 8). But:</p>
- <ol class="sws-pause">
- <li>Empêcher un tiers de lire des données personnelles
- (<em>ok</em>)</li>
- <li>Empêcher un tiers de savoir quels sites ont été visités
- (<em>pas ok</em>)</li>
- </ol>
- <ol>
- <li class="sws-pause">Un site B utilise des publicités pour se rémunérer. Le
- site marchand <s>M</s> fournit du code HTML:
- <code> <script src="http://marchand.com/pub.js"/> </code>
- </li>
- <li class="sws-pause">A visite le site B. Le
- code <tt>pub.js</tt> peut alors faire les choses suivantes:
- <ol>
- <li>Scanner le contenu de la page de B. Possible car le
- script est « inclus » dans une page fournie par B</li>
- <li>Se connecter
- à<s><tt>http://marchand.com/collecte.php</tt></s> et
- passer en paramètre <tt>post</tt> ou <tt>get</tt> le
- contenu de la récolte</li>
- <li><tt>http://marchand.com</tt> peut alors stocker un
- cookie valide <em>pour son domaine</em> avec le contenu de
- la récolte d'information
- </li>
- </ol>
- </li>
- <li class="sws-pause">
- Lorsque A visite le site marchand <s>M</s>, ce dernier
- relit son cookie et fait des propositions ciblées.
- </li>
-
- </ol>
- </div>
- <div class="sws-slide">
- <h1>Solutions</h1>
- <ul>
- <li>Désactiver les cookies de « tierce partie » (cookie dont
- l'origine n'est pas celle de la page visitée)
- </li>
- <li> Effacer par défaut tous les cookies quand on quite le
- navigateur</li>
- <li>Rajouter des exceptions pour certains sites au cas par cas
- </li>
- </ul>
- <p>Nouveau standard du W3C en préparation pour signifier à un
- site qu'on ne souhaite pas être suivi (méthode « volontariste
- » qui suppose que les sites commerciaux sont gentils et
- respectent le protocole)</p>
- </div>
- <div class="sws-slide">
- <h1>Sécurité des cookies de session</h1>
- <p>On a vu que les sessions PHP (vrai aussi pour les autres
- langages côté serveur) stockent dans un cookie un identifiant
- unique. Que se passe-t-il si on vole ce cookie ? (démo)
- </p>
- <p class="sws-pause">Pas d'autre solution que de faire confiance
- au <s>root</s> (solutions partielles basées sur le chiffrement
- des disques dur)
- </p>
- </div>
- <h1>Attaques par injection de code</h1>
- <div class="sws-slide">
- <h1>Injection de code Javascript/HTML</h1>
- <p>Vulnérabilité: on exploite le fait qu'un site <s>utilise
- directement</s> les entrées fournies par l'utilisateur.<br/>
- Exemple: commentaires sur un blog.
- </p>
- <ol>
- <li>Une page Web utilise un formulaire pour permettre de
- poster des commentaires sur un blog:
- <code><![CDATA[
- <form action="comment.php" method="post">
- Commentaire: <br/>
- ]]><em><textarea rows="20" cols="60" name="zonetexte"/></em><![CDATA[
- <br/>
- <button type="submit">Envoyer</button>
-</form>]]></code>
- </li>
- <li>Un bout de code PHP écrit le commentaire sur la page:
- <code> echo "Commentaire #$i: <p>";
- <s>echo $_POST["zonetexte"];</s>
- echo "</p>";
-</code>
-</li>
-
-
- </ol>
- </div>
- <div class="sws-slide">
- <h1>Injection de code Javascript/HTML</h1>
- <s>Problème</s> tout ce qui est dans la zone de texte est copié
- dans la page HTML de chaque client qui consulte la page
- et <s>interprété</s> par son navigateur:
- <code>Debut du commentaire
- <s><script type="text/javascript"></s>
- ... //code javascript malicieux
- <s></script></s>
- Fin du commentaire
- </code>
- </div>
- <div class="sws-slide">
- <h1>Injection de code PHP</h1>
- <p><s>Problème</s> lié à l'utilisation de la fonction
- <code> <s>eval</s>(command)</code>
- <tt><em>command</em></tt> est une chaîne de caractères
- considérée comme étant du code PHP et <tt>eval</tt> exécute
- cette chaîne:
- </p>
- <code>
- echo eval ("1 + 2 * 3"); // affiche 7
- echo eval ('$x = 4;'); // définit la variable $x
- echo $x; // affiche 4
- </code>
- <p>Il ne faut <s>jamais donner une chaine de caractère de
- l'utilisateur comme argument à <tt>eval</tt></s> (sauf durant le
- TP 9)</p>
- </div>
- <div class="sws-slide">
- <h1>Solutions</h1>
- <ul>
- <li>Ne jamais <s>utiliser <tt>eval</tt></s></li>
- <li>Utiliser la fonction <tt>htmlspecialchars</tt> qui
- échappe les
- caractères <tt><</tt>, <tt>></tt>, <tt>&</tt>, <tt>'</tt>, <tt>"</tt></li>
- <li>Utiliser la fonction <tt>striptags</tt> qui supprime tout
- ce qui est une balise</li>
- <li>Toujours valider les entrées d'un utilisateur</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Injection de code SQL</h1>
- <p>SQL: language de requête permettant d'interroger des bases de
- données. Utilisation classique depuis PHP (on suppose un
- formulaire qui met dans le champ <tt>"nom"</tt> le nom d'un
- étudiant):
- </p>
- <code>
- $Q = <em>"SELECT * FROM STUDENTS WHERE "</em>;
- $Q = $Q . <em>"(NAME = '"</em> . $_POST["nom"] . <em>"');"</em>;
- mysql_query($Q);
- </code>
- <p>Si l'utilisateur donne comme nom « Toto », la requête envoyée
- à la base est: </p>
- <code> SELECT * FROM STUDENTS WHERE (NAME = 'Toto');</code>
- <p>Affiche toutes les lignes de la table <tt>STUDENTS</tt> pour
- lesquel le nom est <tt>Toto</tt></p>
- </div>
- <div class="sws-slide">
- <h1>Jusqu'au jour où …</h1>
- <p>©xkcd<br/>
- <img style="width:90%" src="xkcd.png" alt=""/>
- </p>
- <code> <em>SELECT * FROM STUDENTS WHERE (NAME ='</em><s>Robert');</s>
- <s>DROP TABLE STUDENTS; --</s><em>');'</em>
-
- </code>
- </div>
- <div class="sws-slide">
- <h1>Ou bien…</h1>
- <div style="text-align:center;">
- <img style="width:70%" src="radar.jpg" />
- </div>
- </div>
- </body>
-</html>
+++ /dev/null
-<html>
-<body>
-<?php
- if ($_FILES["fichier"]["error"] > 0) {
- echo "Erreur lors de l'envoi du fichier<br/>\n";
-
- } else {
- echo "<ul>\n";
- foreach ($_FILES["fichier"] as $k => $v)
- echo "<li>${k} : ${v}</li>\n";
- echo "</ul>\n";
-}
-?>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<html>
-<body>
-<form action="stat.php" method="post"
- enctype="multipart/form-data">
-
- <input type="file" name="fichier" size="20"/>
-
- <button type="submit">Uploader le fichier</button>
-</form>
-</body>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.4 r9939"
+ sodipodi:docname="cours_4.svg"
+ preserveAspectRatio="xMinYMin meet"
+ viewBox="0 0 488 227"
+ height="100%"
+ width="100%">
+ <defs
+ id="defs4">
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend"
+ style="overflow:visible">
+ <path
+ id="path4048"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mstart"
+ style="overflow:visible">
+ <path
+ id="path4045"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,4,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Lstart"
+ style="overflow:visible">
+ <path
+ id="path4039"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.8,0,0,0.8,10,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Lend"
+ style="overflow:visible">
+ <path
+ id="path4042"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.8,0,0,-0.8,-10,0)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Lend-0"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4042-8"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.8,0,0,-0.8,-10,0)" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="35.363832"
+ inkscape:cy="61.224991"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ fit-margin-top="0.3"
+ fit-margin-right="0.3"
+ fit-margin-bottom="0.3"
+ fit-margin-left="0.3"
+ units="pt"
+ inkscape:window-width="1317"
+ inkscape:window-height="744"
+ inkscape:window-x="49"
+ inkscape:window-y="24"
+ inkscape:window-maximized="1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3851"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true"
+ originx="-48.625px"
+ originy="-714.565px" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-48.625,-111)">
+ <path
+ sodipodi:nodetypes="cc"
+ inkscape:connector-curvature="0"
+ id="path6222"
+ d="m 160,192.36218 c 0,0 110,70 255,0"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none" />
+ <rect
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect2985"
+ width="100"
+ height="110"
+ x="50"
+ y="122.36218"
+ rx="5"
+ ry="5.25" />
+ <rect
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect2987"
+ width="90"
+ height="39.285721"
+ x="55"
+ y="138.07646"
+ rx="5"
+ ry="5.25" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
+ d="m 160,192.36218 c 0,0 110,70 255,0"
+ id="path3853"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
+ d="m 416.70357,171.56972 c 0,0 -110,-69.99999 -255,0"
+ id="path3853-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <path
+ style="fill:#d8d8d8;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ d="m 282.26208,128.4689 c -15.52034,0 -28.93338,7.33912 -35.35367,17.99919 -0.64637,-0.0258 -1.29805,-0.0499 -1.95223,-0.0499 -21.75627,0 -39.38014,14.4159 -39.38014,32.19661 0,9.76218 5.31567,18.50189 13.71136,24.4061 3.8e-4,0.004 -3.8e-4,0.008 0,0.0125 1.54765,16.62328 18.53694,29.71611 39.27338,29.71611 6.98235,0 13.53033,-1.49682 19.21727,-4.10092 6.95058,5.03082 16.08115,8.08966 26.09582,8.08966 13.08998,0 24.68235,-5.22044 31.84576,-13.25009 1.22508,0.0938 2.46634,0.14958 3.72144,0.14958 21.75627,0 39.39539,-14.4159 39.39539,-32.19661 0,-13.70651 -10.48818,-25.40777 -25.25698,-30.05266 -6.2531,-11.0236 -19.90492,-18.67229 -35.75021,-18.67229 -0.93741,0 -1.87005,0.0346 -2.79108,0.0873 -7.06455,-8.6395 -19.10727,-14.33454 -32.77611,-14.33454 z"
+ id="path3034"
+ inkscape:connector-curvature="0" />
+ <text
+ xml:space="preserve"
+ style="font-size:16px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="260"
+ y="182.36218"
+ id="text4503"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4505"
+ x="260"
+ y="182.36218">Internet</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="100"
+ y="152.36218"
+ id="text4507"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4509"
+ x="100"
+ y="152.36218">Client</tspan><tspan
+ sodipodi:role="line"
+ x="100"
+ y="164.86218"
+ id="tspan4511">(Navigateur Web)</tspan></text>
+ <rect
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect2985-2"
+ width="108.57141"
+ height="195"
+ x="426.42859"
+ y="112.36218"
+ rx="5"
+ ry="5.25" />
+ <rect
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect2987-8"
+ width="90"
+ height="39.285721"
+ x="435"
+ y="128.07646"
+ rx="5"
+ ry="5.25" />
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="480"
+ y="142.36218"
+ id="text4507-4"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4509-5"
+ x="480"
+ y="142.36218">Serveur</tspan><tspan
+ sodipodi:role="line"
+ x="480"
+ y="154.86218"
+ id="tspan4511-5">(programme)</tspan></text>
+ <path
+ id="path4543"
+ style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0"
+ d="m 530.88892,222.97799 c 0,6.90356 -21.9929,13.52857 -49.60714,13.52857 -27.61424,0 -50.39286,-6.62501 -50.39286,-13.52857 0,-6.90356 22.77862,-11.47143 50.39286,-11.47143 27.61424,0 49.60714,4.56787 49.60714,11.47143 z m -100,0 0,30 c 0.96873,5.73041 23.81743,11.57532 50.15625,11.57532 26.33882,0 46.37503,-5.8385 49.84375,-11.57532 0,-5 0,-30 0,-30"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="sssssccscc" />
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="100"
+ y="202.36218"
+ id="text4507-8"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4509-6"
+ x="100"
+ y="202.36218">Client</tspan><tspan
+ sodipodi:role="line"
+ x="100"
+ y="214.86218"
+ id="tspan4511-3">(Machine)</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="456.82117"
+ y="251.13666"
+ id="text4618"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4620"
+ x="456.82117"
+ y="251.13666">Documents</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="480"
+ y="282.36218"
+ id="text4507-4-3"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan4509-5-2"
+ x="480"
+ y="282.36218">Serveur</tspan><tspan
+ sodipodi:role="line"
+ x="480"
+ y="294.86218"
+ id="tspan4511-5-6">(machine)</tspan></text>
+ <path
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
+ d="m 480,172.36218 c 0,20 0,35 0,35"
+ id="path4646"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#92b938;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Bold"
+ x="470"
+ y="322.36218"
+ id="text5218"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5220"
+ x="470"
+ y="322.36218">PHP</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="470.14297"
+ y="337.36218"
+ id="text5222"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5224"
+ x="470.14297"
+ y="337.36218">Java</tspan></text>
+ <g
+ id="g5236"
+ transform="translate(17.421707,1)">
+ <text
+ sodipodi:linespacing="125%"
+ id="text5226"
+ y="251.36218"
+ x="82.578293"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#92b938;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Bold"
+ xml:space="preserve"><tspan
+ y="251.36218"
+ x="82.578293"
+ id="tspan5228"
+ sodipodi:role="line">HTML</tspan><tspan
+ id="tspan5230"
+ y="263.86218"
+ x="82.578293"
+ sodipodi:role="line">CSS</tspan></text>
+ <text
+ sodipodi:linespacing="125%"
+ id="text5232"
+ y="272.36218"
+ x="60"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ xml:space="preserve"><tspan
+ y="272.36218"
+ x="60"
+ id="tspan5234"
+ sodipodi:role="line">Javascript</tspan></text>
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="260"
+ y="122.36218"
+ id="text5262"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan5264"
+ x="260"
+ y="122.36218">Requêtes</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:10px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"
+ x="290"
+ y="252.36218"
+ id="text6026"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan6028"
+ x="290"
+ y="252.36218">Réponses</tspan><tspan
+ sodipodi:role="line"
+ x="290"
+ y="264.86218"
+ id="tspan6030">(pages, images, vidéos, scripts, …)</tspan></text>
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="m 153.69106,188.74964 7.20077,7.55969 2.97218,-5.21212 z"
+ id="path6798-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccc" />
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="m 422.59911,174.46563 -7.57857,-7.1809 -2.70129,5.35752 z"
+ id="path6798-2"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccc" />
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="m 480.06526,168.83859 -3.04557,9.98622 5.99994,0.0274 z"
+ id="path6798-2-2"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccc" />
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="m 480.06526,209.70337 -3.04557,-9.98622 5.99994,-0.0274 z"
+ id="path6798-2-2-4"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccc" />
+ </g>
+</svg>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
--- /dev/null
+<html>
+ <body>
+ <form method="post" action="password2.php">
+ Username: <input name="name" type="text" width="20"> </input><br/>
+ Password: <input name="pass" type="password"
+ width="20"></input><br/>
+ <button type="submit">Connect</button>
+ </form>
+ </body>
+</html>
--- /dev/null
+<html>
+ <body>
+ <?php
+if (isset($_POST["name"])) {
+ echo "Bonjour, " . $_POST["name"];
+};
+
+?>
+ </body>
+</html>
--- /dev/null
+<html>
+<body>
+<?php
+ if ($_FILES["fichier"]["error"] > 0) {
+ echo "Erreur lors de l'envoi du fichier<br/>\n";
+
+ } else {
+ echo "<ul>\n";
+ foreach ($_FILES["fichier"] as $k => $v)
+ echo "<li>${k} : ${v}</li>\n";
+ echo "</ul>\n";
+}
+?>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<html>
+<body>
+<form action="stat.php" method="post"
+ enctype="multipart/form-data">
+
+ <input type="file" name="fichier" size="20"/>
+
+ <button type="submit">Uploader le fichier</button>
+</form>
+</body>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Systèmes d'exploitation (1/2)</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+
+ </head>
+ <body>
+
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 1</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a>
+ </div>
+
+ <div class="sws-slide" >
+ <h1>Contenu du cours</h1>
+ <ol >
+ <li > Comprendre les bases du Web
+ <ul>
+ <li>Fonctionnement des ordinateusr Unix (cours 1 et 2) </li>
+ <li>Notions de réseau (cours 3 et 4) </li>
+ </ul>
+ </li>
+ <li class="sws-pause" style="padding:20pt 0;" > Programmer (pour) le Web
+ <ul>
+ <li>Pages statiques (HTML & CSS cours 5)</li>
+ <li>Pages dynamiques avec PHP (cours 6, 7 et 8)</li>
+ <li>Notions de sécurité des sites Web (cours 9)</li>
+ <li>Bonus (cours 10)</li>
+ </ul>
+ </li>
+ <p>Cours disponible en ligne
+ sur <a href="https://www.lri.fr/~kn/teaching_fr.html">https://www.lri.fr/~kn/teaching_fr.html</a>. Les
+ supports de cours seront distribués à partir de la semaine prochaine.</p>
+ </ol>
+
+ </div>
+ <div class="sws-slide" >
+ <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
+ <p>2 sessions:</p>
+ <ul >
+ <li > 1<sup>ère</sup> session
+ <ul>
+ <li> Contrôle continu (50%):
+ <ul>
+ <li> Partiel (fin octobre/début novembre) 25% </li>
+ <li> 1 interro(s) de TP (25 %) </li>
+ </ul>
+ </li>
+ <li> Examen (50%) </li>
+ </ul>
+ </li>
+ <li class="sws-pause" >
+ 2<sup>ème</sup> session (examen 100%)</li>
+ </ul>
+ <p class="sws-pause" ><b>Rappel:</b>
+ <i>La défaillance fait obstacle au calcul de la moyenne
+ et implique l'ajournement.
+ La présence de l'étudiant étant obligatoire en TP [...], plus
+ d'une absence injustiée dans un enseignement peut entraîner
+ la défaillance de l'étudiant dans l'enseignement concerné
+ </i>
+ </p>
+ </div>
+
+ <div class="sws-slide" >
+ <h1>Organisation</h1>
+ <ul>
+ <li> 10 semaines de cours :
+ <ul>
+ <li> 8/9, 16/9, 23/9, 30/9, 7/9, 14/9 </li>
+ <li> partiel/toussaint </li>
+ <li> 4/11, <em>(pas de cours le 11/11)</em>, 18/11, 25/11, 2/12</li>
+ </ul>
+ </li>
+ <li> 10 semaines de TP :
+ <ul><li>18/9, 25/9, 2/10, 9/10, 16/10</li>
+ <li> partiel/toussaint</li>
+ <li>6/11, 13/11, 20/11, 27/11, 4/12</li>
+ </ul>
+ </li>
+ <li> examen début Janvier</li>
+ <li> cours tous les mardi (13h30) </li>
+ <li> TP le jeudi (9h) </li>
+ </ul>
+ </div>
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li> Systèmes d'exploitation
+ <ul class="empty">
+ <li class="hl">1.1 Principes des systèmes
+ d'exploitation</li>
+ <li>1.2 Système de gestion de fichiers</li>
+ <li>1.3 Système de gestion de processus</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Système d'exploitation </h1>
+ <p>Quelques systèmes:</p>
+ <ul>
+ <li>Windows XP/NT/2003/7/8, …</li>
+ <li>Linux, FreeBSD, NetBSD, OpenBSD, …</li>
+ <li>MacOS X (basé sur une variante de FreeBSD), …</li>
+ <li>Unix, AIX, Solaris, HP-UX, …</li>
+ <li>Symbian OS (Nokia), iOS, Android, …</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Système d'exploitation </h1>
+ <p>Qu'est-ce qu'un système d'exploitation ?</p>
+ <ul>
+ <li class="sws-pause" >c'est un <em>programme</em></li>
+ <li class="sws-pause" > qui <em>organise</em> l'accès aux <em>ressources</em> de la machine</li>
+ </ul>
+ <p class="sws-pause"> Quelles sont les ressources d'une machine?</p>
+ <ul>
+ <li>Processeur (temps d'exécution)</li>
+ <li>Mémoire</li>
+ <li>Accès aux périphériques de stockage</li>
+ <li>Accès aux périphériques d'entrées/sorties</li>
+ <li>…</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1> Système d'exploitation </h1>
+ <br/>
+ <div style="display:inline-block;vertical-align:middle;width:19%;text-align:center;">
+ Haut niveau<br/>
+ <span style="font-size:6cm;">↓</span><br/>
+ Bas niveau
+ </div>
+ <div style="display:inline-block; width:80%;vertical-align:middle;">
+ <ul class="empty">
+ <li><em>Applications</em>: navigateur Web, éditeur de
+ texte, anti-virus, jeu, compilateur, …</li>
+ <li style="margin-top:2em;" ><em><b>Système d'exploitation</b></em>:
+ <ul>
+ <li>Gestion des ressources</li>
+ <li>Interface avec le matériel (pilotes)</li>
+ </ul>
+ </li>
+ <li style="margin-top:2em;"><em>Matériel</em>: CPU, mémoire, périphériques, …</li>
+ </ul>
+ </div>
+ </div>
+ <div class="sws-slide centerbox">
+ <h1>Le système Unix</h1>
+ <table class="desc">
+ <tr><td>1965</td> <td>MultICS: <i>Multiplexed Information and Computing Service</i> (Bell & MIT) </td>
+ </tr>
+ <tr><td>1969</td> <td>Unix: 1<sup>ère</sup> version en
+ assembleur (AT&T)</td>
+ </tr>
+ <tr><td style="width:4em;">1972-73</td><td> Unix réécrit en C</td></tr>
+ <tr><td>1976</td><td> Invention de TCP/IP</td></tr>
+ <tr><td>1977</td><td> <i>Berkeley Software Distribution</i>
+ (BSD)</td></tr>
+ <tr><td>1985</td><td>Unix System V</td></tr>
+ <tr><td>1988</td><td>Minix</td></tr>
+ <tr><td>1992</td><td>Linux</td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <div class="centerbox">
+ <h1>Unix : architecture</h1>
+ <table style="position:relative;left:5%;width:90%;" class="rounded">
+ <tr><td colspan="2" style="background:#ddf;width:100%;">
+ Applications
+ </td>
+ </tr>
+ <tr><td style="width:50%;background:#bbf;">
+ Interface utilisateur
+ </td>
+ <td style="width:50%;background:#bbf;">
+ Services
+ </td>
+ </tr>
+ <tr><td colspan="2" style="width:100%;background:#99f;color:white;">
+ Noyau (<i>kernel</i>)
+ </td>
+ </tr>
+ <tr><td style="border-style:none;"/> <td style="background:#88f;color:white;">
+ Micro-code
+ </td>
+ </tr>
+ <tr><td colspan="2" style="width:100%;background:#77f;color:white;">
+ Matériel
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1>Zoom sur le noyau</h1>
+ <table style="position:relative;left:5%;width:90%;" class="rounded">
+ <tr> <td style="background:#ddf;width:20%;">
+ Applications
+ </td>
+ </tr>
+ <tr><td style="width:20%; border-style:none;" />
+ <td style="width:80%;background:#ddf;">
+ Bibliothèques
+ (<tt>libc</tt>, <tt>DirectX</tt>, <tt>OpenGL</tt>, …)
+ </td>
+ </tr>
+ </table>
+ <hr style="border-bottom: dashed 1pt #696968; width: 90%;border-top:none;" />
+ <table style="position:relative;left:5%;width:90%;"
+ class="rounded sws-pause">
+ <tr><td style="width:100%;background:#f99;color:white;">
+ Appels systèmes
+ </td>
+ </tr>
+ <tr> <td style="background:#f66;color:white;">
+ Noyau <br/>
+ <div style="font-size:smaller">
+ pilotes de périphériques <span style="display:inline-block;width:4em"> </span>
+ ordonnanceur (gestion du temps CPU)<br/>
+ gestionnaire de mémoire <span style="display:inline-block;width:4em"> </span>
+ système de fichier<br/>
+ </div>
+ </td>
+ </tr>
+ <tr><td style="width:100%;background:#f33;color:white;">
+ Matériel
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Le <i>Shell</i> Unix</h1>
+ <ul>
+ <li>Interface utilisateur <em>en mode texte</em><br/>
+ L'utilisateur écrit des commandes dont le résultat est
+ affiché à l'écran</li>
+ <li>Interface « historique » sous Unix</li>
+ <li>Expose à l'utilisateur certains concepts Unix
+ (permissions, propriétaires, processus, …)</li>
+ <li>Ces concepts sont importants pour pouvoir concevoir de
+ sites Web</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Le <i>Shell</i> Unix</h1>
+ <p>Exemple de session <i>shell</i>:</p>
+ <div>
+ <code>
+ $ ls
+ <span style="color:blue">Documents Downloads Public Person</span>
+ $ cd Documents
+ $ ls
+ <span style="color:blue">compte_rendu.txt</span>
+ $ mv compte_rendu.txt cr.txt
+ $ ls
+ <span style="color:blue">cr.txt</span>
+ </code>
+ </div>
+ </div>
+
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li> Systèmes d'exploitation
+ <ul class="empty">
+ <li >1.1 Principes des systèmes
+ d'exploitation</li>
+ <li class="hl">1.2 Système de gestion de fichiers</li>
+ <li>1.3 Système de gestion de processus</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Système de gestion de fichiers (<i>filesystem</i>)</h1>
+ <ul>
+ <li> <em>Organise</em> les données sur le support
+ physique </li>
+ <li>Protège contre les <em>corruptions de données</em> </li>
+ <li>Gestion optimale de l'espace disponible</li>
+ <li><em>Accès efficace</em> aux données</li>
+ <li><em>Abstraction</em> du support physique (DVD, mémoire
+ flash, disque réseau, …)</li>
+ <li>Enregistrement des <em>méta-données</em> (date de
+ création, propriétaire, taille, …)</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Le concept de <em>fichier</em></h1>
+ <p>
+ Un fichier est une <em>collection d'infromations
+ numériques</em> réunies sous un même <em>nom</em> et
+ enregistrée sur un support de stockage
+ </p>
+ <ul>
+ <li>Manipulable comme une unité</li>
+ <li>Selon les systèmes, le <em>nom</em> a plus ou moins
+ d'importance</li>
+ <li>possède un type</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Le concept de <em>fichier</em></h1>
+ <p>Ne pas confondre:</p>
+ <ul>
+ <li>type du fichier: il influe sur le comportement du système
+ (fichier « normal », répertoire, lien (raccourcis), fichier
+ système, …). C'est une méta-donnée conservée par le système
+ de fichier</li>
+ <li>type du contenu: le type des <em>données</em> contenues
+ dans le fichier:
+ <ul>
+ <li>DOS puis Windows: l'extension (les 3 derniers
+ caractères après le « . ») détermine le type de contenu
+ </li>
+ <li>MacOS puis OS X/iOS: les premiers octets du fichier
+ déterminent son type
+ </li>
+ <li>Premiers octets ou extension, selon les interfaces
+ utilisées</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Les attributs d'un fichier</h1>
+ <table class="desc">
+ <tr>
+ <td style="width:7em;"><em>Nom</em></td> <td/>
+ </tr>
+ <tr>
+ <td><em>Propriétaire</em></td>
+ <td>utilisateur qui possède ce fichier</td>
+ </tr>
+ <tr>
+ <td><em>Groupe</em></td>
+ <td>groupe d'utilisateurs qui possède ce fichier</td>
+ </tr>
+ <tr>
+ <td><em>Emplacement</em></td>
+ <td>localisation du fichier sur le support physique</td>
+ </tr>
+ <tr>
+ <td><em>Taille</em></td>
+ <td>en octet (peut être la taille réelle ou la taille
+ occupée sur le support)</td>
+ </tr>
+ <tr>
+ <td><em>Permissions</em></td>
+ <td> « qui a quel droit » sur le fichier (lecture, écriture,
+ exécution, …)
+ </td>
+ </tr>
+ <tr>
+ <td><em>Type</em></td>
+ <td/>
+ </tr>
+ <tr>
+ <td><em>Dates</em></td>
+ <td>dernier accès, dernière modification, création, …</td>
+ </tr>
+ </table>
+ </div>
+<div class="sws-slide">
+<h1>Organisation logique des fichiers</h1>
+<p> Usuellement, les fichiers sont regroupés en <em>répertoires</em>. Les
+répertoires sont imbriqués les uns dans les autres de manière a former
+une <em>arborescence</em>.
+</p>
+<p>
+ <em>Sous Unix</em> il y a un répertoire racine, « <em>/</em> »
+(<i>slash</i>) qui contient toute l'arborescence du système.<br/>
+Chaque utilisateur possède aussi un répertoire personnel
+</p>
+</div>
+
+<div class="sws-slide">
+<h1>Noms de fichiers et chemins</h1>
+<p style="background:white;">
+Un chemin est une <em>liste de répertoire</em> à traverser pour
+atteindre un fichier ou répertoire donné.
+Sous Unix, le séparateur de chemin est le « <em>/</em> » <br/>
+<em>Les chemins absolus </em> commencent par un <tt>/</tt> et
+ dénotent des fichiers à partir de la racine. Exemple:
+ <code>
+ /home/kim/Documents/ProgInternet/cours01.pdf
+ </code>
+<em>Les chemins relatifs</em> dénotent des fichiers à partir du
+ répertoire courant. Exemple:<br/>
+<code> Documents/ProgInternet/cours01.pdf</code>
+si on se trouve dans le répertoire <tt>/home/kim</tt>
+<br/>
+<br/>
+<em>Les noms spéciaux</em>: « . » dénote le répertoire
+ courant,
+ « .. » le répertoire parent, « ~ » le répertoire de
+ l'utilisateur et « ~<tt>toto</tt> » le répertoire de l'utilisateur
+ <tt>toto</tt>
+</p>
+</div>
+
+<div class="sws-slide">
+ <h1>Utilisation du <i>Shell</i></h1>
+ <p>
+ Le <em>shell</em> affiche un <em>invite de commande</em>
+ (<i>prompt</i>). Exemple:<br/>
+ <code>kim@machine $ <span class="sws-pause" /></code><br/><br/>
+ <span>On peut alors saisir une commande:</span><br/><br/>
+ <code> kim@machine $ ls *.txt<span class="sws-pause"/></code><br/><br/>
+ <span>Le shell affiche la <em>sortie</em> de la commande:</span><br/><br/>
+ <code> fichier1.txt fichier2.txt</code><br/><br/>
+ <span>Certains caractères doivent être précédés d'un « \ » (échappés):</span><br/><br/>
+ <code> kim@machine $ ls mon\ fichier\#1.txt</code>
+ </p>
+</div>
+<div class="sws-slide">
+<h1>La ligne de commande</h1>
+<p>
+ Une ligne de commande a la forme:<br/>
+ <code>prog item1 item2 item3 item4 … </code>
+</p>
+ <ol>
+ <li class="sws-pause"> Si <tt>prog</tt> est un chemin il doit
+ dénoter <em>un fichier exécutable </em>
+ </li>
+ <li class="sws-pause"> Si <tt>prog</tt> est un simple nom, il doit dénoter un fichier
+ exécutable se trouvant dans un des <em>répertoires prédéfinis</em>
+ (<tt>/bin</tt>, <tt>/usr/bin</tt>, …)
+ </li>
+ <li class="sws-pause"> Pour chaque <tt>item<sub>i</sub></tt> (séparés par un ou plusieurs espaces
+ non échappés) le <i>shell</i> fait une <em>expansion de nom</em>
+ </li>
+ <li class="sws-pause"> La liste de toutes les chaînes de caractères expansées est
+ passée comme argument au programme <tt>prog</tt>
+ </li>
+ </ol>
+</div>
+<div class="sws-slide">
+<h1>Expansion des noms<br/>Expressions régulières glob</h1>
+<p>
+ Certains caractères sont <em>interprétés</em> de manière spéciale par le
+ <i>shell</i>. Ces caractères sont « expansés » selon des
+ règles. Si la forme <em>expansée</em> correspond a un ou plusieurs fichiers
+ existants, alors leurs noms sont placés sur la ligne de commande. Sinon
+ la chaîne de caractère de départ garde sa valeur textuelle.
+</p>
+</div>
+<div class="sws-slide">
+ <h1>Expressions régulières glob</h1>
+ <p>Règles d'expansion:
+ <tt><em>*</em></tt> n'importe quelle chaîne<br/>
+ <tt><em>?</em></tt> n'importe quel caractère
+ <tt><em>[ab12…]</em></tt> un caractère dans la liste <br/>
+ <tt><em>[^ab12…]</em></tt> un caractère absent de liste<br/>
+ <tt><em>[a-z]</em></tt> un caractère dans l'intervalle<br/>
+ <tt><em>[^a-z]</em></tt> un caractère absent de l'intervalle<br/>
+ <tt><em>{m<sub>1</sub>, m<sub>2</sub>}</em></tt>
+ motif <tt>m<sub>1</sub></tt> ou <tt>m<sub>2</sub></tt> <br/>
+ <tt><em>?(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>@(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>*(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>+(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt><br/>
+ <i>k</i> motifs parmi <tt>m<sub>i</sub></tt> <br/>
+ <tt><em>?</em></tt>: <tt>0 ≤ <i>k</i> ≤ 1</tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>@</em></tt>: <tt><i>k</i> = 1</tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>*</em></tt>: <tt><i>k</i> ≥ 0</tt>
+ <span style="display:inline-block;width:2em" />
+ <tt><em>+</em></tt>: <tt><i>k</i> ≥ 1</tt>
+ <br/>
+ <tt><em>!(m<sub>1</sub>|…|m<sub>n</sub>)</em></tt>:
+ ni <tt>m<sub>1</sub></tt>, …, ni <tt>m<sub>n</sub></tt>
+</p>
+</div>
+<div class="sws-slide">
+<h1>Expressions régulières glob<br/>Exemples</h1>
+<p><tt><em>ls !(*[aeiouy]?)</em></tt> <span class="sws-pause">
+ La chaine « <tt>!(*[aeiouy]?)</tt> » est remplacée par la liste de tous
+ les fichiers dont l'avant dernière lettre du nom n'est pas une
+ voyelle. S'il n'y a pas de tel fichier, la chaîne
+ « <tt>!(*[aeiouy]?)</tt> » est passée à la commande <tt>ls</tt>.</span><br/><br/>
+ <span>
+ <tt><em>ls [0-9]*</em></tt> affiche la liste des fichiers commençant par un
+ chiffre<br/><br/>
+ <tt><em>ls +(abc)</em></tt> affiche la liste des fichiers dont le nom est une
+ répétition de « abc ».
+</span>
+</p>
+</div>
+<div class="sws-slide">
+<h1>Commandes shell de base</h1>
+<ul class="empty">
+<li><em>cd </em><i>chemin</i>: <i>chemin</i> devient le
+ répertoire courant. Si absent, utilise le répertoire personnel
+</li>
+<li><em>ls</em> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>:
+ affiche le nom des <i>n</i> fichiers. Si <i>n=0</i> affiche le contenu du
+ répertoire courant. Avec l'option <tt><em>-l</em></tt> affiche la liste
+ détaillée.
+</li>
+<li><em>cp</em> <i>chemin<sub>1</sub></i> <i>chemin<sub>2</sub></i>:
+copie de fichier
+</li>
+<li><em>mv</em> <i>chemin<sub>1</sub></i> <i>chemin<sub>2</sub></i>:
+ déplacement
+ de fichier (et renommage)
+</li>
+<li><em>rm</em> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>:
+ supprime les fichiers (définitif)
+</li>
+</ul>
+</div>
+<div class="sws-slide">
+<h1>Droits et propriétés des fichiers</h1>
+<p>
+Sous Unix un utilisateur est identifié par son <em>login</em> (ou nom
+d'utilisateur). Chaque utilisateur est dans un <em>groupe
+ principal</em>.<br/>
+Chaque fichier appartient à un utilisateur et à un groupe.<br/>
+Chaque fichier possède 3 permissions pour son propriétaire, son groupe
+et tous les autres. Les permissions sont lecture, écriture, exécution
+(plus d'autres non abordées dans ce cours).<br/>
+<table >
+ <tr><th style="width:20%">Permission</th> <th style="width:40%">fichier</th> <th style="width:40%">répertoire</th> </tr>
+ <tr><td><em>lecture</em> (r)</td> <td>lire le contenu du
+ fichier</td>
+ <td >lister le contenu du répertoire</td></tr>
+
+ <tr><td style="vertical-align:top;"><em>écriture</em> (w)</td> <td style="vertical-align:top;">écrire dans le fichier</td>
+ <td style="vertical-align:top;">supprimer/renommer/créer des
+ fichiers dans le répertoire</td></tr>
+ <tr><td style="vertical-align:top;"><em>exécution</em>
+ (x)</td> <td style="vertical-align:top;">exécuter le fichier
+ (si<br/>
+
+ c'est un programme)</td>
+ <td style="vertical-align:top;">rentrer dans le répertoire
+ </td></tr>
+</table>
+<code>$ ls -l
+drwxr-x--- 9 kim prof 4096 Sep 7 21:31 Documents</code>
+</p>
+</div>
+<div class="sws-slide">
+<h1>La commande <em>chmod</em></h1>
+<code>
+ chmod <i>permissions</i> <i>chemin<sub>1</sub></i> … <i>chemin<sub>n</sub></i>
+</code>
+<p> modifie les permissions des fichiers <i>1</i> à <i>n</i>. La chaîne
+<i><tt>permissions</tt></i> est soit une suite de modifications de
+permissions <em>symbolique</em> soit l'ensemble des permissions données
+de manière <em>numérique</em>: <br/>
+<code>
+ chmod 755 fichier.txt
+ chmod u-w,a+x,g=w fichier.txt
+</code>
+</p>
+</div>
+<div class="sws-slide">
+<h1>Permissions numériques</h1>
+<p>
+On groupe les <em>bits</em> de permissions par trois puis on convertit
+en décimal:<br/>
+<table style="width:100%;text-align:center;" class="btable">
+<tr> <th colspan="3" style="width:33%"> Utilisateur </th>
+ <th colspan="3" style="width:33%">
+ Groupe</th>
+ <th colspan="3" style="width:33%">Autres</th>
+</tr>
+<tr>
+ <td>r</td> <td>w</td> <td>x</td> <td>r</td> <td>w</td> <td>x</td> <td>r</td> <td>w</td> <td>x</td>
+</tr>
+<tr>
+ <td>1</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td>
+</tr>
+<tr>
+<td colspan="3"> 6 </td> <td colspan="3">
+ 4</td><td colspan="3">0</td>
+</tr>
+</table>
+Le fichier est lisible et modifiable mais pas exécutable par son
+propriétaire, lisible pour le groupe. Les autres ne peuvent ni le lire
+ni le modifier.</p>
+</div>
+<div class="sws-slide">
+<h1>Permissions symboliques</h1>
+<code>
+ cible modifieur permission
+</code>
+<ul class="empty">
+ <li> <em>cible</em> : u (utilisateur), g (groupe), o (others), a
+ (all)
+ </li>
+
+ <li> <em>modifieur</em> : + (autorise), - (interdit), = (laisse
+ inchangé)
+ </li>
+
+ <li><em>permission</em> : r (lecture), w (écriture), x (exécution)</li>
+</ul>
+<p>
+Exemple:<br/>
+<code> chmod u+rw,u-x,g+r,g-wx,o-rwx fichier.txt </code>
+</p>
+</div>
+<div class="sws-slide">
+ <h1>Liens symboliques (1)</h1>
+<p>Pour des raisons d'organisation, on veut pouvoir « voir » le même
+ fichier ou répertoire sous deux noms différents (ou à deux endroits
+ différents). Par exemple:
+</p>
+<code style="background:white">
+ $ ls -l <mark>Documents/Cours</mark>
+ total 8
+ drwxr-xr-x 3 kim prof 4096 Sep 9 11:30 <mark>Licence</mark>
+ drwxr-xr-x 3 kim prof 4096 Sep 9 11:30 <mark>Master</mark>
+
+ $ cd <mark>Documents/Cours/Master</mark>; ls
+ <mark>Compilation XMLProgInternet</mark>
+
+ $ cd <mark>XML_Prog_Internet</mark>; ls
+ <mark>cours01 cours02 cours03 cours04 cours05 cours06</mark> <mark style="color:turquoise">Prereq</mark>
+
+ $ ls -l Prereq
+ lrwxrwxrwx 1 kim prof 28 Sep 9 11:30 <mark style="color:turquoise">Prereq</mark> -> <mark>../../Licence/UnixProgWeb/</mark>
+</code>
+
+</div>
+<div class="sws-slide">
+ <h1>Liens symboliques (2)</h1>
+ <p>La commande <em><tt>ln</tt></em> permet de créer des <em>liens
+ symboliques</em>. Un lien est un petit fichier qui contient
+ un <em>chemin</em> vers un fichier de destination.
+ </p>
+ <p>Exemple d'utilisation</p>
+<code> $ ln -s ../foo/bar/baz/toto.txt rep/titi.txt
+</code>
+<p class="sws-pause">crée un lien vers le fichier <tt>toto.txt</tt>
+ sous le nom <tt>titi.txt</tt> (chacun placé dans des sous/sur
+ répertoires)
+</p>
+<ul>
+ <li>Ouvrir/modifier le lien > ouvre/modifie la cible</li>
+ <li>Supprimer le lien > supprime le lien mais pas la cible</li>
+ <li>Si la cible est un répertoire, faire <tt>cd</tt> nous place «
+ dans » la cible, mais le repertoire parent est celui d'où l'on vient</li>
+</ul>
+<p>Cela permet de créer l'illusion que la cible a été copiée à
+ l'identique, sans les inconvénients</p>
+</div>
+<div class="sws-slide">
+ <h1>À propos de la suppression</h1>
+ <p>La commande <tt>rm fichier</tt> efface un fichier définitivement<br/>
+ La commande <tt>rm -d rep</tt> efface un répertoire s'il est vide<br/>
+ La commande <tt>rm -r rep</tt> efface un répertoire récursivement
+ mais demande confirmation avant d'effacer des éléments<br/>
+ La commande <tt>rm -rf rep</tt> efface un répertoire
+ récursivement et sans confirmation</p>
+ <p><s>Toute suppression est définitive</s></p>
+ <p>Gag classique :</p>
+ <code style="background:white"> $ mkdir <s>\~</s>
+ ...
+ $ ls
+ <mark> Documents Photos Musique ~</mark>
+ $ rm -rf <s>~</s>
+ <mark style="font-size:200%;"> ☠ ☠ ☠ ☠ ☠ ☠</mark>
+</code>
+</div>
+<div class="sws-slide">
+ <h1>Obtenir de l'aide sur une commande</h1>
+ <p>La commande <em><tt>man</tt></em> permet d'obtenir de l'aide sur
+ une commande. Lors qu'une page d'aide est affichée, on peut la faire
+ défiler avec les touches du clavier, la quitter avec « <tt>q</tt> »
+ et rechercher un mot avec la touch « <tt>/</tt> »</p>
+ <code style="position:relative;left:10%;font-size:70%">
+LS(1L) Manuel de l'utilisateur Linux LS(1L)
+
+
+<FONT COLOR="#000000"><B>NOM</B></FONT>
+ ls, dir, vdir - Afficher le contenu d'un répertoire.
+
+<FONT COLOR="#000000"><B>SYNOPSIS</B></FONT>
+ <FONT COLOR="#000000"><B>ls</B></FONT> <FONT COLOR="#000000"><B>[options]</B></FONT> <FONT COLOR="#000000"><B>[fichier...]</B></FONT>
+
+ Options POSIX : <FONT COLOR="#000000"><B>[-1acdilqrtuCFR]</B></FONT>
+
+ Options GNU (forme courte) : <FONT COLOR="#000000"><B>[-1abcdfgiklmnopqrstuxABCD</B></FONT>
+ <FONT COLOR="#000000"><B>FGLNQRSUX]</B></FONT> <FONT COLOR="#000000"><B>[-w</B></FONT> <FONT COLOR="#0000ff"><I>cols<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[-T</B></FONT> <FONT COLOR="#0000ff"><I>cols<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[-I</B></FONT> <FONT COLOR="#0000ff"><I>motif<FONT COLOR="#000000"><B>]</B></FONT></I></FONT> <FONT COLOR="#000000"><B>[--full-time]</B></FONT>
+ <FONT COLOR="#000000"><B>[--format={long,verbose,commas,across,vertical,single-col</B></FONT>
+ <FONT COLOR="#000000"><B>umn}]</B></FONT> <FONT COLOR="#000000"><B>[--sort={none,time,size,extension}]</B></FONT>
+ <FONT COLOR="#000000"><B>[--time={atime,access,use,ctime,status}]</B></FONT>
+ <FONT COLOR="#000000"><B>[--color[={none,auto,always}]]</B></FONT> <FONT COLOR="#000000"><B>[--help]</B></FONT> <FONT COLOR="#000000"><B>[--version]</B></FONT> <FONT COLOR="#000000"><B>[--]</B></FONT>
+
+<FONT COLOR="#000000"><B>DESCRIPTION</B></FONT>
+ La commande <FONT COLOR="#000000"><B>ls</B></FONT> affiche tout d'abord l'ensemble de ses
+ arguments <FONT COLOR="#0000ff"><I>fichiers</I></FONT> autres que des répertoires. Puis <FONT COLOR="#000000"><B>ls</B></FONT>
+ affiche l'ensemble des fichiers contenus dans chaque
+ répertoire indiqué. <FONT COLOR="#000000"><B>dir</B></FONT> et <FONT COLOR="#000000"><B>vdir</B></FONT> sont des versions de <FONT COLOR="#000000"><B>ls</B></FONT>
+ affichant par défaut leurs résultats avec d'autres for
+ mats.
+
+</code>
+
+</div>
+<div class="sws-slide">
+ <h1>Recherche de fichiers</h1>
+ <p>La commande <tt>find rep <i>criteres</i></tt> permet de trouver
+ tous les fichiers se trouvant dans le répertoire <tt>rep</tt> (ou un
+ sous répertoire) et répondant à certains critères. Exemples de
+ critères :</p>
+ <ul>
+ <li> <tt>-name '*toto*'</tt> dont le nom
+ contient <tt>toto</tt></li>
+ <li> <tt>-size +200M</tt> dont la taille sur le disque est
+ supérieure à 200 Mo</li>
+ <li> <tt> <i>c<sub>1</sub></i> -a <i>c<sub>2</sub></i></tt> pour
+ lesquel les critères <tt> <i>c<sub>1</sub></i></tt>
+ et <tt> <i>c<sub>2</sub></i></tt> sont vrais</li>
+ <li> <tt> <i>c<sub>1</sub></i> -o <i>c<sub>2</sub></i></tt> pour
+ lesquel l'un au moins des critères <tt> <i>c<sub>1</sub></i></tt>
+ et <tt> <i>c<sub>2</sub></i></tt> est vrais</li>
+ <li> <tt>-user toto</tt> qui appartiennent à l'utilisateur <tt>toto</tt></li>
+ </ul>
+ <p> Comment trouver toutes les options de la commande <tt>find</tt>
+ ? <span class="sws-pause"><tt><em> man find</em></tt></span></p>
+</div>
+<div class="sws-slide">
+ <h1>Quelques commandes utiles</h1>
+ <ul>
+ <li> <tt>cat <i>fichier</i></tt> permet d'afficher le contenu d'un fichier dans
+ le terminal</li>
+ <li> <tt>less <i>fichier</i></tt> permet de lire le contenu d'un fichier (avec
+ défilement en utilisant les flêches du clavier si le fichier est
+ trop grand)</li>
+ <li> <tt>sort <i>fichier</i></tt> permet d'afficher les lignes d'un fichier
+ triées (on peut spécifier des options de tri)</li>
+ <li> <tt>file <i>fichier</i></tt> permet de connaître le type d'un
+ fichier</li>
+ <li> <tt>wc <i>fichier</i></tt> permet de compter le nombre de
+ caractères/mots/lignes d'un fichier</li>
+ <li> <tt>head <i>fichier</i></tt> permet de garder les <i>n</i>
+ premières lignes d'un fichier</li>
+ </ul>
+ <p>On verra comment composer ces commandes pour exécuter des
+ opérations complexes</p>
+</div>
+ </body>
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Systèmes d'exploitation (2/2)</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ <style>
+ #svg2,#svg3 {
+ -webkit-transform: scale(1.8) translateX(40%);
+ transform: scale(1.8) translateX(40%);
+ }
+ </style>
+ </head>
+ <body>
+ <a href="prog_internet_01.xhtml" class="sws-previous" />
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 2</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li> Systèmes d'exploitation
+ <ul class="empty">
+ <li>1.1 Principes des systèmes
+ d'exploitation ✔</li>
+ <li>1.2 Système de gestion de fichiers ✔</li>
+ <li class="hl">1.3 Système de gestion de processus</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Définitions </h1>
+ <table class="desc">
+ <tr>
+ <td style="width:6.5em;">Programme</td> <td>séquences d'instructions effectuant
+ une tâche sur un ordinateur</td>
+ </tr>
+ <tr>
+ <td>Exécutable</td> <td>fichier binaire contenant des
+ instructions machines interprétables par le
+ microprocesseur</td>
+ </tr>
+ <tr>
+ <td><i>Thread</i> </td>
+ <td>plus petite unité de traitement (≡
+ séquence d'instructions) pouvant être ordonnancée par
+ l'OS
+ </td>
+ </tr>
+ <tr>
+ <td>Processus</td>
+ <td> instance d'un programme (≡ « un
+ programme en cours d'exécution »). Un processus est constitué
+ de un ou plusieurs <i>threads</i>.</td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Exemple: programme </h1>
+ <p>Dans un fichier « <code> counter.c </code> »
+ (<span style="color:red;">attention c'est du pseudo
+ C</span>)</p>
+ <div style="float:left;clear:both;vertical-align:top;width:45%;display:inline-block;border-right: 1pt solid #494948;">
+<code > int count = 0;
+ int exit = 0;
+ void <span style="color:green;">display()</span> {
+ while (exit == 0) {
+ sleep (3);
+ printf("%i\n", count);
+ }
+ }
+ void <span style="color:red;">listen()</span> {
+ while (exit == 0) {
+ wait_connect(80);
+ count++;
+ }
+ }</code>
+ </div> <div style="vertical-align:top;display:inline-block;width:45%;">
+<code> void <span style="color:blue;">main ()</span> {
+ run_function(display);
+ run_function(listen);
+ while (getc () != '\n') { };
+ exit = 1;
+ return;
+ }</code>
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1> Exemple: programme </h1>
+ <p>Compilation <br/>
+ <code>
+ gcc -o counter.exe counter.c
+ </code><br/>
+ Le <em>fichier</em> « <code>counter.exe</code> » est un
+ exécutable (fichier binaire contenant du code machine)<br/>
+ <code>
+ ./counter.exe <span style="margin-left:2em;font-size:smaller;color:red;"> ← il faut la permission +x sur le fichier</span>
+ </code>
+ <br/>
+ Le contenu de l'exécutable est copié en mémoire et le processeur
+ commence à exécuter la première instruction du programme.
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1> Exemple: <i>threads</i> </h1>
+ <ol>
+ <li class="sws-pause" ><span style="color:white;background:blue">main</span> </li>
+ <li class="sws-pause" ><span style="color:blue;">attente d'un évènement clavier
+ →</span><span style="color:red;">←changement de <i>thread</i></span>
+ </li>
+ <li class="sws-pause" ><span style="color:white;background:red">listen</span> </li>
+ <li class="sws-pause" ><span style="color:red;">attente de connexion →</span><span style="color:green;">←changement de <i>thread</i></span>
+ </li>
+ <li class="sws-pause" ><span style="color:white;background:green">display</span> (<span style="color:green;">affiche
+ 0 à l'écran)</span> </li>
+ <li class="sws-pause" ><span style="color:green;">attente pendant 3s →</span> (les
+ 3 <i>threads</i> attendent un évènement externe)<br/>
+ <span class="sws-pause" >nouvelle connexion sur le port 80</span> <span style="color:red;">←
+ réveil du <i>thread</i> <code style="color:red;">listen</code></span>
+ </li>
+ <li class="sws-pause" ><span style="color:white;background:red">listen</span>
+ (<span style="color:red;">incrémente <code style="color:red">count</code></span>)<br/>
+ <span style="color:red;">attente de connexion →</span><br/>
+ <span>… fin des 3s</span><br/>
+ <span style="color:green;">←
+ réveil du <i>thread</i> <code style="color:green;">display</code></span>
+ </li>
+ <li class="sws-pause" ><span style="color:white;background:green">display</span> (<span style="color:green;">affiche
+ 1 à l'écran)</span> </li>
+ </ol>
+ <p class="sws-pause" >Les <i>threads</i> partagent leur mémoire (variables communes)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Exemple: processus</h1>
+ <p>(différence: les processus
+ <em>ne partagent pas leur espace mémoire</em>)</p>
+ <ol>
+ <li>Exécution de <code><span style="color:blue;">coun</span><span style="color:red;">ter</span><span style="color:green;">.exe</span></code> pendant 50㎲
+ </li>
+ <li > Exécution
+ de <code><span style="color:orange;">firefox.exe</span></code>
+ pendant 50㎲ </li>
+ <li > Exécution du processus qui dessine le bureau pendant 50
+ ㎲<br/> … </li>
+
+ </ol>
+ <p>C'est le <em>gestionnaire de processus</em> qui décide quel
+ programme a la main et pour combien de temps (priorité aux
+ tâches critiques par exemple)<br/>
+ Le système d'exploitation stocke pour chaque processus un
+ ensemble d'informations, le PCB (<i>Process Control Block</i>).
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Proccess Control Block</h1>
+ <p>Le PCB contient:</p>
+ <ul>
+ <li>l'<em>identificateur du processus</em> (pid)</li>
+ <li>l'<em>l'état</em> du processus (en attente, en exécution,
+ bloqué, …)</li>
+ <li>le compteur d'instructions (<i>i.e.</i> où on en est dans
+ le programme)</li>
+ <li>le <em>contexte courant</em>(état des registres, …)</li>
+ <li>position dans <em>la file d'attente de priorité
+ globale</em></li>
+ <li>informations mémoire (zones allouées, zones accessibles,
+ zones partagées)</li>
+ <li>listes des fichiers ouverts (en lecture, en écriture),
+ liste des connexions ouvertes, … <br/> … </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Opérations sur les processus</h1>
+ <ul>
+ <li><em>création</em> et <em>destruction</em> de
+ processus</li>
+ <li><em>suspension</em> et <em>reprise</em></li>
+ <li><em>duplication</em> (<i>fork</i>)</li>
+ <li>modification de la <em>priorité</em></li>
+ <li>modification des <em>permissions </em></li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>États d'un processus</h1>
+ <p>Un processus change d'état au cours de son exécution</p>
+ <table class="desc">
+ <tr><td style="width:6em;">Nouveau</td> <td>le processus est en cours de création</td></tr>
+ <tr><td>Exécution</td> <td>le processus s'exécute</td></tr>
+ <tr><td>En attente</td> <td>le processus attend un évènement
+ particulier (saisie au clavier, écriture sur le disque,
+ …)</td></tr>
+ <tr><td>Prêt</td> <td>le processus est prêt à reprendre son
+ exécution et attend que l'OS lui rende la main</td></tr>
+ <tr><td>terminé</td> <td>le processus a fini son exécution</td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>États d'un processus</h1>
+ <p>L'OS détermine et modifie l'état d'un processus:</p>
+ <ul>
+ <li>En fonction d'évènements internes au processus:
+ <ul><li>lecture d'un fichier (si le contenu n'est pas
+ disponible, le processus passe de « prêt » à « en attente
+ »)</li>
+ <li>le processus attends volontairement pendant x
+ secondes<br/>…</li>
+ </ul>
+ </li>
+ <li>
+ En fonction d'évènements externes au processus:
+ <ul><li>un fichier devient disponible</li>
+ <li>un <i>timer</i> arrive à 0</li>
+ <li>le matériel déclenche une <em>interruption</em></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>États d'un processus</h1>
+ <svg
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="340.10629"
+ height="207.70399"
+ viewBox="0 0 350 208"
+ id="svg2"
+ >
+ <defs
+ id="defs4">
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ </defs>
+ <g
+ transform="translate(-43.8,-16.162183)"
+ id="layer1">
+ <g
+ transform="translate(2.8953552e-6,-2.2416992e-6)"
+ id="g4956">
+ <text
+ x="50"
+ y="32.362183"
+ id="text2985"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="50"
+ y="32.362183"
+ id="tspan2987">Nouveau</tspan></text>
+ <text
+ x="140"
+ y="102.36218"
+ id="text2989"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="140"
+ y="102.36218"
+ id="tspan2991">Prêt</tspan></text>
+ <text
+ x="255"
+ y="102.36218"
+ id="text2993"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="255"
+ y="102.36218"
+ id="tspan2995">En exécution</tspan></text>
+ <text
+ x="195"
+ y="187.36218"
+ id="text2997"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="195"
+ y="187.36218"
+ id="tspan2999">En attente</tspan></text>
+ <rect
+ width="65"
+ height="20"
+ rx="5"
+ ry="5.25"
+ x="45"
+ y="17.362183"
+ id="rect3007"
+ style="fill:none;stroke:#ffff05;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <rect
+ width="45"
+ height="20"
+ rx="5"
+ ry="5.25"
+ x="130"
+ y="87.362183"
+ id="rect3007-2"
+ style="fill:none;stroke:#009eff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <rect
+ width="90"
+ height="20"
+ rx="5"
+ ry="5.25"
+ x="250"
+ y="87.362183"
+ id="rect3007-8"
+ style="fill:none;stroke:#5aff0b;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <rect
+ width="68"
+ height="19"
+ rx="5"
+ ry="5.25"
+ x="192"
+ y="173.36218"
+ id="rect3007-7"
+ style="fill:none;stroke:#ff7b00;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <path
+ d="m 70,42.362183 c 0,35 20,55 55,55"
+ id="path3809"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 150,82.362183 c 30,-30 120,-30 145,0"
+ id="path3809-2"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 295,112.36218 c -30,30 -121.15954,29.51126 -146.15954,-0.48874"
+ id="path3809-2-8"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 305,112.36218 c 0,35 -10,70 -45,70"
+ id="path3809-9"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 185,182.36218 c -35.00001,0 -45,-35 -45,-70"
+ id="path3809-9-6"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <text
+ x="325"
+ y="217.36218"
+ id="text2997-5"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="325"
+ y="217.36218"
+ id="tspan2999-3">Terminé</tspan></text>
+ <rect
+ width="58"
+ height="19"
+ rx="5"
+ ry="5.25"
+ x="322"
+ y="203.36218"
+ id="rect3007-7-6"
+ style="fill:none;stroke:#ff0000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <path
+ d="m 315,112.36218 c 13.42024,11.32439 24.04764,43.74151 35,85"
+ id="path3809-9-6-7"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 225,197.36218 c 15,15 60,15 95,15"
+ id="path3809-9-6-2"
+ style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2, 1;stroke-dashoffset:0;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 135,112.36218 c 5,85 20,100 185,105"
+ id="path3809-8"
+ style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2, 1;stroke-dashoffset:0;marker-end:url(#Arrow2Mend)" />
+ <text
+ x="225"
+ y="37.362183"
+ id="text4821"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="225"
+ y="37.362183"
+ id="tspan4823">mise en route</tspan><tspan
+ x="225"
+ y="48.612183"
+ id="tspan4825">par l'ordonnanceur</tspan></text>
+ <text
+ x="220"
+ y="117.36218"
+ id="text4821-3"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="220"
+ y="112.36218"
+ id="tspan4823-1">interruption</tspan><tspan
+ x="220"
+ y="123.61218"
+ id="tspan4825-7">par l'ordonnanceur</tspan></text>
+ <text
+ x="300"
+ y="187.36218"
+ id="text4821-0"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="300"
+ y="187.36218"
+ id="tspan4825-74">attente E/S</tspan><tspan
+ x="300"
+ y="198.61218"
+ id="tspan4864">interruption</tspan></text>
+ <text
+ x="180"
+ y="152.36218"
+ id="text4821-0-2"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="180"
+ y="152.36218"
+ id="tspan4864-7">fin E/S</tspan><tspan
+ x="180"
+ y="163.61218"
+ id="tspan4892">int. traitée</tspan><tspan
+ x="180"
+ y="174.86218"
+ id="tspan4894">…</tspan></text>
+ <text
+ x="360"
+ y="147.36218"
+ id="text4821-0-29"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="365"
+ y="147.36218"
+ id="tspan4864-1">terminaison</tspan><tspan
+ x="365"
+ y="158.61218"
+ id="tspan4909">normale</tspan></text>
+ <text
+ x="170"
+ y="212.36218"
+ id="text4821-0-7"
+ xml:space="preserve"
+ style="font-size:9px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="170"
+ y="212.36218"
+ id="tspan4864-75">terminaison</tspan><tspan
+ x="170"
+ y="223.61218"
+ id="tspan4935">anormale</tspan></text>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="sws-slide">
+ <h1>La commande <code><em>ps</em></code></h1>
+ <p>Permet d'avoir des informations sur les processus en cours
+ d'exécution (voir « <code>man ps</code> » pour les
+ options):<br/>
+ <code>$ ps -o user,pid,state,cmd x
+ USER PID S CMD
+ …
+ kim 27030 Z [chrome] <defunct>
+ kim 27072 S /opt/google/chrome/chrome --type=renderer
+ kim 29146 S bash
+ kim 29834 S evince
+ kim 29858 S emacs cours.xhtml
+ kim 29869 R ps -o user,pid,state,cmd x
+ </code><br/>
+ </p>
+
+ </div>
+ <div class="sws-slide">
+ <h1>États des processus (sous Linux)</h1>
+ <table class="desc">
+ <tr> <td>R</td> <td> <i>Running</i> (en cours d'exécution)</td> </tr>
+ <tr> <td>S</td> <td> <i>Interruptible sleep</i> (en attente,
+ interruptible) </td> </tr>
+ <tr> <td>D</td> <td> <i>Uninterruptible sleep</i> (en attente,
+ non-interruptible) </td> </tr>
+ <tr> <td>T</td> <td> <i>Stopped</i> (interrompu)</td></tr>
+ <tr> <td>Z</td> <td> <i>Zombie</i> (terminé mais toujours
+ listé par le système)</td> </tr>
+ </table>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Signaux</h1>
+ <p>L'OS peut envoyer des <em>signaux</em> à un processus. Sur réception
+ d'un signal, un processus peut interrompre son comportement normal
+ et exécuter son <em>gestionnaire de signal</em>. Quelques signaux:
+ </p>
+ <table class="simple">
+ <tr><th>Nom</th> <th>Code</th> <th>Description</th> </tr>
+ <tr><td>HUP</td> <td>1</td> <td>demande au processus de
+ s'interrompre</td></tr>
+ <tr><td>INT</td> <td>2</td> <td>demande au processus de se
+ terminer</td></tr>
+ <tr><td>ABRT</td> <td>2</td> <td>interrompt le processus et produit
+ un <i>dump</i></td></tr>
+ <tr><td>KILL</td> <td>9</td> <td>interrompt le processus immédiatement
+ </td></tr>
+ <tr><td>SEGV</td> <td>11</td> <td>signale au processus une erreur mémoire
+ </td></tr>
+ <tr><td>STOP</td> <td>24</td> <td>suspend l'exécution du processus
+ </td></tr>
+ <tr><td>CONT</td> <td>28</td> <td>reprend l'exécution d'un processus suspendu
+ </td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Processus et terminal</h1>
+ <p >Un processus est lié au <em>terminal</em> dans lequel il est
+ lancé. Si on exécute un programme dans un terminal et que le
+ processus ne rend pas la main, le terminal est bloqué
+<code >
+
+ $ gedit
+
+</code>
+ On peut envoyer au processus le signal <em>STOP</em> en
+ tapant <code>ctrl-Z</code> dans le terminal:
+<code>
+
+ $ gedit
+ ^Z
+ [1]+ Stopped gedit
+
+</code>
+ Le processus est suspendu, la fenêtre est gelée (ne répond plus).
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Processus et terminal</h1>
+ <p> <span>On peut reprendre l'exécution du programme de deux
+ manières:<br/>
+ <code> $ fg </code><br/>
+ Reprend l'exécution du processus et le remet en avant plan (terminal
+ bloqué)</span><br/>
+ <span class="sws-pause"><code> $ bg </code><br/>
+ Reprend l'exécution du processus et le remet en arrière plan (terminal
+libre)</span><br/>
+ <span class="sws-pause">On peut lancer un programme
+ directement en arrière plan en faisant:<br/>
+<code> $ gedit & </code><br/></span>
+ <span class="sws-pause">On peut envoyer un signal à un
+ processus avec la commande « <code>kill [-signal] pid</code> »<br/>
+<code> $ kill -9 2345 </code></span>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Processus et entrées/sorties</h1>
+ <p>Le terminal et le processus sont liés par trois fichiers
+ spéciaux:</p>
+ <ol>
+ <li> L'entrée standard (<code><em>stdin</em></code>), reliée
+ au clavier</li>
+ <li> La sortie standard (<code><em>stdout</em></code>), reliée
+ à l'affichage</li>
+ <li> La sortie d'erreur (<code><em>stderr</em></code>), reliée
+ à l'affichage</li>
+ </ol>
+ <p>Dans le <i>shell</i>, on peut utiliser les
+ opérateurs <code><em><</em></code>, <code><em>></em></code>
+ et <code><em>2></em></code> pour récupérer le contenu
+ de <code><em>stdin</em></code>, <code><em>stdout</em></code>
+ et <code><em>stderr</em></code>:<br/>
+<code>
+$ sort < toto.txt
+$ ls -l > liste_fichiers.txt
+$ ls -l * 2> erreurs.txt
+</code>
+</p>
+</div>
+ <div class="sws-slide">
+ <h1>Processus et entrées/sorties</h1>
+ <p>Dans le <i>shell</i>, l'opérateur <em>|</em> permet
+ d'enchaîner la sortie d'un programme avec l'entrée d'un
+ autre:<br/>
+<code> $ <span style="color:green;">ls -l *.txt</span> | <span style="color:blue">sort -n -r -k 5</span> | <span style="color:orange">head -n 1</span></code>
+ </p>
+ <ol>
+ <li style="color:green;">affiche la liste détaillée des
+ fichiers textes</li>
+ <li style="color:blue;">trie (et affiche) l'entrée standard par ordre
+ numérique décroissant selon le 5ème champ</li>
+ <li style="color:orange;">affiche la première ligne de
+ l'entrée standard</li>
+ </ol>
+ <div style="height:5em;position:relative;margin:0 0;padding:0 0;">
+<code class="sws-onframe-1" style="position:absolute;color:green;"> -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt
+ -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt
+ -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt</code>
+<code class="sws-onframe-2" style="position:absolute;color:blue;"> -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt
+ -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt
+ -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt
+</code>
+<code class="sws-onframe-3" style="position:absolute;color:orange;"> -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt
+</code>
+ </div>
+
+ </div>
+<div class="sws-slide">
+ <h1>Processus de type <i>daemon</i></h1>
+<p>
+ Un <i>daemon</i> (prononcé démon) est un processus
+ qui <em>non-interactif</em> qui tourne en tâche de fond (pas
+ d'entrée/sortie sur le terminal, pas d'interface graphique, …). On
+ communique avec ce processus via des <em>signaux</em> ou en lisant
+ ou écrivant dans des fichiers ou connexions réseau. Le plus souvent,
+ leur but est de fournir un <em>service</em>
+</p>
+<p>Exemple de scénario: « <i> Les utilisateurs doivent interagir avec
+ le matériel. L'accès au matériel demande des droits
+ administrateur.</i> »
+</p>
+<ul class="empty">
+ <li>Solution 1 : tout le monde est administrateur (DOS, Win XP,
+ …)</li>
+ <li>Solution 2 : on crée un programme particulier qui a les
+ privilèges suffisants pour la tâche en question. Les utilisateurs
+ communiquent avec ce programme</li>
+</ul>
+</div>
+<div class="sws-slide">
+ <h1>Quelques <i>daemons</i> sous Linux</h1>
+<table class="simple">
+<tr><th>Nom</th> <th>Description</th> </tr>
+<tr><td>sshd</td> <td><i>shell</i> distant sécurisé</td> </tr>
+<tr><td>crond</td> <td>exécution périodique de programmes</td> </tr>
+<tr><td>cupsd</td> <td>serveur d'impressions</td> </tr>
+<tr><td>pulseaudio</td> <td>serveur de son (mixe les sons des
+ différentes applications)</td> </tr>
+<tr><td>udevd</td> <td>détection de matériel <i>hotplug</i></td></tr>
+<tr><td>nfsd</td> <td>serveur de fichier réseau</td></tr>
+<tr><td>smtpd</td> <td>livraison des e-mail</td></tr>
+<tr class="sws-pause"><td><em>httpd</em></td> <td>serveur de pages Web</td></tr>
+</table>
+</div>
+<div class="sws-slide">
+<h1>Architecture client-serveur</h1>
+<svg
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="256"
+ height="163.70399"
+ id="svg3">
+ <defs
+ id="defs3115">
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-9"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-7"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-2"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-3"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-1"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-71"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="marker4143"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path4145"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-11"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-39"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="marker4143-8"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path4145-9"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-6"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-1"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="marker4245"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path4247"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-7"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-8"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="marker4353"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path4355"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="Arrow2Mend-8"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path3842-4"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ <marker
+ refX="0"
+ refY="0"
+ orient="auto"
+ id="marker4353-5"
+ style="overflow:visible">
+ <path
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)"
+ id="path4355-9"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
+ </marker>
+ </defs>
+ <g
+ transform="translate(-158.9,-91.262203)"
+ id="layer1">
+ <g
+ id="g3947">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="translate(-1.2000122,1.5039978)"
+ id="g3942">
+ <text
+ x="266.20001"
+ y="175.85818"
+ id="text2985-1"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="266.20001"
+ y="175.85818"
+ id="tspan3164">Serveur</tspan></text>
+ <rect
+ width="53.799988"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="261.20001"
+ y="160.85818"
+ id="rect3007-8"
+ style="fill:none;stroke:#0000ff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ <g
+ id="g4097">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ <g
+ transform="translate(210,0)"
+ id="g3947-5">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068-3">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985-0"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987-3">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007-5"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="translate(109.96827,1.0864348)"
+ id="g4097-7">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809-3"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5-7"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ <g
+ transform="matrix(0.56532555,0.82486788,-0.82486788,0.56532555,266.51188,-153.17986)"
+ id="g4097-0">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809-2"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5-5"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ <g
+ transform="translate(40,-70)"
+ id="g3947-3">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068-36">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985-2"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987-4">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007-7"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="translate(165,-70)"
+ id="g3947-1">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068-1">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985-9"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987-6">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007-6"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="matrix(-0.56532555,0.82486788,0.82486788,0.56532555,302.25486,-153.17986)"
+ id="g4097-0-8">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809-2-9"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5-5-7"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ <g
+ transform="translate(40,70)"
+ id="g3947-3-1">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068-36-8">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985-2-8"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987-4-1">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007-7-3"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="translate(160,70)"
+ id="g3947-1-7">
+ <g
+ transform="translate(-1.1999969,-3.4960022)"
+ id="g4068-1-2">
+ <text
+ x="166.2"
+ y="180.85818"
+ id="text2985-9-4"
+ xml:space="preserve"
+ style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DIN;-inkscape-font-specification:DIN Semi-Bold"><tspan
+ x="166.2"
+ y="180.85818"
+ id="tspan2987-6-0">Client</tspan></text>
+ <rect
+ width="43.800003"
+ height="21.503998"
+ rx="5"
+ ry="5.25"
+ x="161.2"
+ y="165.85818"
+ id="rect3007-6-4"
+ style="fill:none;stroke:#ff8305;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ </g>
+ <g
+ transform="matrix(0.56532555,0.82486788,-0.82486788,0.56532555,327.54691,-80.416181)"
+ id="g4097-0-2">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809-2-3"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5-5-5"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ <g
+ transform="matrix(-0.56532555,0.82486788,0.82486788,0.56532555,242.10224,-81.191343)"
+ id="g4097-0-3">
+ <path
+ d="m 210,177.36218 c 15,10 30,10 45,0"
+ id="path3809-2-7"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ <path
+ d="m 255.84443,171.31278 c -15,-10 -30,-10 -45,0"
+ id="path3809-5-5-9"
+ style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
+ </g>
+ </g>
+</svg>
+<p>
+ <br/><br/>
+ Des processus <span style="color:blue;">clients</span> communiquent
+ avec le <span style="color:orange;">serveur</span> à travers le
+ réseau. Les clients sont indépendant et ne communiquent pas entre
+ eux. <em>Attention</em> plusieurs clients peuvent se trouver su la
+ même machine physique!
+</p>
+</div>
+<div class="sws-slide">
+ <h1>Architecture client-serveur</h1>
+<ul>
+ <li>Le serveur attend des connexions entrantes</li>
+ <li>Les clients peuvent se connecter à tout moment</li>
+ <li>L'application client est généralement légère, envoie une
+ requête au serveur et attend un résultat</li>
+ <li>Le serveur est une application plus lourde qui:
+ <ul><li>effectue des calculs trop coûteux pour le client</li>
+ <li>gère l'accès à une ressource distante partagée<br/>…</li>
+ </ul>
+ </li>
+</ul>
+<p>Exemples: serveur de bases de données, serveur mail, serveur Web,
+ terminal de carte bancaire, …</p>
+</div>
+ </body>
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Réseaux, TCP/IP</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ <style>
+ #svg2,#svg3 {
+ -webkit-transform: scale(1.8) translateX(40%);
+ transform: scale(1.8) translateX(40%);
+ }
+ </style>
+ </head>
+ <body>
+ <a class="sws-previous" href="prog_internet_02.xhtml" />
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 2</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+
+ </body>
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Web et HTML</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a class="sws-previous" href="prog_internet_03.xhtml" />
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 4</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li> Systèmes d'exploitation ✔</li>
+ <li> Réseaux et Internet ✔ </li>
+ <li> Le Web
+ <ul class="empty">
+ <li class="hl">3.1 Internet et ses services</li>
+ <li>3.2 Fonctionnement du Web</li>
+ <li>3.3 Adressage des documents Web</li>
+ <li>3.4 Le protocole HTTP</li>
+ <li>3.5 HTML, le format des documents</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ <h1>Internet et ses services </h1>
+ <div class="sws-slide">
+ <h1> Bref historique d'Internet (1/2)</h1>
+ <table class="desc">
+ <tr>
+ <td style="width:6.5em;">1959-1968</td> <td>ARPA
+ (<i>Advanced Research Project Agency</i>) crée un réseau
+ de quelques machines capable de résister à une attaque.</td>
+ </tr>
+ <tr>
+ <td>1969</td> <td>ARPANET. Interconnexion des ordinateurs
+ centraux des grandes universités et institutions
+ américaines. Première utilisation du concept de paquet d'information.</td>
+ </tr>
+ <tr>
+ <td>1970-1982 </td>
+ <td>Interconnexion avec la Norvège et le Royaume-Uni.
+ </td>
+ </tr>
+ <tr>
+ <td>1982</td>
+ <td> Passage au protocole TCP/IP. Naissance de l'Internet actuel.</td>
+ </tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1> Bref historique d'Internet (2/2)</h1>
+ <table class="desc">
+ <tr>
+ <td style="width:6.7em;">1986</td> <td>« Autoroutes de
+ l'information ». Des super-ordinateurs et les premières
+ connexions à fibres optiques sont utilisées pour accélérer
+ le débit d'Internet.</td>
+ </tr>
+ <tr>
+ <td>1987-1992</td> <td>Apparition des premiers fournisseurs
+ d'accès. Les entreprises se connectent.</td>
+ </tr>
+ <tr>
+ <td>1993-2000 </td>
+ <td>Avènement du Web. Démocratisation du haut-débit (vers
+ 2000 pour la France).
+ </td>
+ </tr>
+ <tr>
+ <td>2000-présent</td>
+ <td> Explosion des services en ligne, arrivée des réseaux
+ sociaux, internet mobile, <i>Cloud</i> (stockage et calcul
+ mutualisés accessible depuis internet).</td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Internet </h1>
+ <ul>
+ <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
+ </li>
+ <li> Modèle Client/Serveur</li>
+ <li> Un serveur fournit un service:
+ <ul>
+ <li>courriel</li>
+ <li>transfert de fichier (ftp)</li>
+ <li>connexion à distance (ssh)</li>
+ <li>Web (http)</li>
+ </ul>
+ </li>
+ <li> Plusieurs services peuvent être actifs sur la même
+ machine (serveur). Un <em>port (identifiant numérique)</em>
+ est associé à chaque service. Sur Internet, un service est
+ identifié par:
+ <ul>
+ <li>L'adresse IP de la machine sur lequel il fonctionne</li>
+ <li>Le numéro de port sur lequel le programme attend les
+ connexions</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1> Exemples de services </h1>
+ <table class="simple" style="width:100%">
+ <tr><th style="width:10%">Service</th>
+ <th style="width:40%">Protocole</th>
+ <th style="width:5%">Port</th>
+ <th style="width:45%;">Description</th>
+ </tr>
+ <tr>
+ <td>ftp</td> <td >File Transfer Protocol</td> <td>
+ 20,21 </td> <td>Transfert de fichiers</td> </tr>
+ <tr> <td>telnet</td> <td>Network Virtual
+ Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
+ <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
+ distance crypté</td></tr>
+ <tr> <td>mail</td><td>Simple Mail Transfer
+ Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
+ <tr><td>pop</td> <td>Post Office
+ Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
+ <tr><td>imap</td> <td>Internet Message Access
+ Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
+ <tr><td>nslookup</td> <td>Domain Name
+ System</td> <td>42</td> <td>Serveur de noms</td></tr>
+ <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1> World Wide Web (1/2)</h1>
+ <ul>
+ <li>Service de distribution de page <em>hypertexte</em></li>
+ <li>Une page <em>hypertexte</em> contient des références
+ immédiatement accessibles à d'autres pages (pointeurs
+ ou <em>liens hypertextes</em>)</li>
+ <li>Les pages sont décrites dans le
+ langage <em>HTML</em> (HyperText Markup Language) </li>
+ <li>Architecture client/serveur:
+ <ul>
+ <li>Les pages sont stockées sur le serveur</li>
+ <li>Les pages sont envoyées au client (navigateur Web) qui
+ en assure le rendu</li>
+ </ul>
+ </li>
+ <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
+ le client et le serveur</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1> World Wide Web (2/2)</h1>
+ <p>Concepts clé:</p>
+ <table class="desc">
+ <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
+ la page »)</td> </tr>
+ <tr><td>HTTP</td> <td>protocole de communication entre un
+ client et un serveur Web</td> </tr>
+ <tr><td>HTML</td> <td>langage de description des pages
+ Web</td> </tr>
+ </table>
+ <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
+ <ul>
+ <li>Standardisation du contenu multimédia (images, vidéos et
+ sons en <i>streaming</i>)</li>
+ <li>Contenu interactif avancé (stockage de fichier coté
+ client, rendu 3D, …)</li>
+ <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
+ </ul>
+ </div>
+
+
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li class="done" > Systèmes d'exploitation</li>
+ <li class="done" > Réseaux et Internet </li>
+ <li> Le Web
+ <ul class="empty">
+ <li class="done">3.1 Internet et ses services</li>
+ <li class="hl" >3.2 Fonctionnement du Web</li>
+ <li class="">3.3 Adressage des documents Web </li>
+ <li>3.4 Le protocole HTTP</li>
+ <li>3.5 HTML, le format des documents</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ <h1> Fonctionnement du Web </h1>
+ <div class="sws-slide">
+ <h1>Fonctionnement du Web</h1>
+ <div style="text-align:center;">
+ <img style="width:90%;height:50%;" src="cours_4.svg"
+ type="image/svg+xml" />
+ </div>
+
+ </div>
+
+ <div class="sws-slide">
+ <h1>Côté client</h1>
+ <p>Le navigateur :</p>
+ <ul>
+ <li>Analyse l'URL demandée</li>
+ <li>Obtient l'adresse IP auprès du serveur DNS</li>
+ <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
+ <li>Envoie une <em>requête HTTP</em> au serveur</li>
+ <li>Récupère la page envoyée par le serveur dans
+ sa <em>réponse</em></li>
+ <li>Analyse la page et récupère les éléments référencés :
+ images, sons, …</li>
+ <li>Effectue le traitement du code client</li>
+ <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Côté serveur</h1>
+ <ul>
+ <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
+ connexions sur un port par défaut (80 dans le cas de HTTP)</li>
+ <li>À chaque nouvelle connexion, le <i>listener</i> crée
+ un <i>thread</i> de traitement et se remet en attente
+ </li>
+ <li>Le <i>thread</i> de traitement vérifie la validité de la
+ requête :
+ <ul>
+ <li>le document demandé existe ?
+ </li>
+ <li>le client est autorisé à accéder au document ?
+ </li>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>Le <i>thread</i> de traitement répond à la requête :
+ <ul>
+ <li>Exécution de code côté serveur, récupération de
+ données dans une BD, …
+ </li>
+ <li>Envoi de la page au client
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li class="done" > Systèmes d'exploitation</li>
+ <li class="done" > Réseaux et Internet </li>
+ <li> Le Web
+ <ul class="empty">
+ <li class="done">3.1 Internet et ses services</li>
+ <li class="done" >3.2 Fonctionnement du Web</li>
+ <li class="hl">3.3 Adressage des documents Web </li>
+ <li>3.4 Le protocole HTTP</li>
+ <li>3.5 HTML, le format des documents</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ <h1> Adressage des documents Web </h1>
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (1/3)</h1>
+ <table class="desc">
+ <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
+ identifie un document sur internet</td></tr>
+ </table>
+ <p>Une URL se décompose en 3 partie</p>
+ <ul><li><em>protocole</em> (comment ?)</li>
+ <li><span style="color:orange;">adresse</span> (où ?)</li>
+ <li><span style="color:blue;">document</span> (quoi ?)</li>
+ </ul>
+ <p>Syntaxe (simplifiée) :</p>
+ <code> <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
+ <p>Exemple :</p>
+ <code> <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (2/3)</h1>
+ <p>On peut aussi préciser <span style="color:purple;">un numéro
+ de port</span>, des <span style="color:black;">paramètres</span>
+ et un <span style="color:red;">emplacement</span> :
+ </p>
+ <code> <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
+ <p class="sws-pause" >Exemple :</p>
+ <code> <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
+ <p>Le serveur utilise les paramètres passés par le client dans
+ l'URL pour <i>calculer</i> le contenu de la page (changer la
+ chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (3/3)</h1>
+ <p>
+ La <em>racine</em> d'un site Web
+ (ex: <em><code>http://www.lri.fr/</code></em>) correspond
+ à un répertoire sur le disque du serveur
+ (ex: <em><code>/var/www</code></em>). Le fichier</p>
+ <code> http://www.lri.fr/index.html</code>
+ <p>se trouve à l'emplacement</p>
+ <code> /var/www/index.html</code>
+ <p>Le serveur Web peut aussi effectuer des <em>réécritures
+ d'adresses</em> :</p>
+ <code> http://www.lri.fr/~kn/index.html</code>
+ <p>devient</p>
+ <code> /home/kn/public_html/index.html</code>
+ </div>
+
+ <h1>Le protocole HTTP</h1>
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li class="done" > Systèmes d'exploitation</li>
+ <li class="done" > Réseaux et Internet </li>
+ <li> Le Web
+ <ul class="empty">
+ <li class="done">3.1 Internet et ses services</li>
+ <li class="done" >3.2 Fonctionnement du Web</li>
+ <li class="done">3.3 Adressage des documents Web </li>
+ <li class="hl">3.4 Le protocole HTTP</li>
+ <li>3.5 HTML, le format des documents</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Caractéristiques du protocole HTTP</h1>
+ <ul>
+ <li>Sans connexion permanente:
+ <ul>
+ <li>Le client se connecte au serveur, envoie sa requête,
+ se déconnecte</li>
+ <li>Le serveur se connecte au client, envoie sa réponse,
+ se déconnecte</li>
+ </ul>
+ </li>
+ <li>Indépendant du contenu : permet d'envoyer des documents
+ (hyper) texte, du son, des images, …</li>
+ <li>Sans <em>état</em>: chaque paire requête/réponse est
+ indépendante (le serveur ne maintient pas d'information sur le
+ client entre les requêtes)</li>
+ <li>Protocole en mode <em>texte</em></li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Format des messages HTTP</h1>
+ <p>Les messages ont la forme suivante</p>
+ <ul><li>Ligne initiale CR LF</li>
+ <li>zéro ou plusieurs lignes d'option CR LF</li>
+ <li>CR LF</li>
+ <li>Corp du message (document envoyé, paramètres de la
+ requête, …)</li>
+ </ul>
+ <ul><li><em>Requête</em> la première ligne contient un nom
+ de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
+ méthode et la version du protocole</li>
+ <li><em>Réponse</em> la version du protocole, le code de la
+ réponse (200, 404, 403, …) et un message informatif
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Démo</h1>
+ </div>
+ <h1>HTML, le format des documents</h1>
+ <div class="sws-slide" >
+ <h1> Plan </h1>
+ <ol >
+ <li class="done" > Systèmes d'exploitation</li>
+ <li class="done" > Réseaux et Internet </li>
+ <li> Le Web
+ <ul class="empty">
+ <li class="done">3.1 Internet et ses services</li>
+ <li class="done" >3.2 Fonctionnement du Web</li>
+ <li class="done">3.3 Adressage des documents Web </li>
+ <li class="done">3.4 Le protocole HTTP</li>
+ <li class="hl">3.5 HTML, le format des documents</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>HTML</h1>
+ <p>
+ <em>HyperText Markup Language</em> : langage de mise en forme
+ de documents hypertextes (texte + liens vers d'autres
+ documents). Développé au CERN en 1989.<br/>
+ <em>1991</em> : premier navigateur en mode texte<br/>
+ <em>1993</em> : premier navigateur graphique (mosaic)
+ développé au NCSA (National Center for Supercomputing
+ Applications)
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Document HTML</h1>
+ <ul><li> est un document <em>semi-structuré</em></li>
+ <li> dont la structure est donnée par
+ des <em>balises</em></li>
+ </ul>
+ <div>
+ <table class="btable simple" style="width:90%;margin-left:5%">
+ <thead>
+ <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
+ </thead>
+ <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
+ texte <b>en gras</b></td></tr>
+ <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
+ <td><a style="color:blue;text-decoration:underline;"
+ href="http://www.u-psud.fr">Un lien</a></td></tr>
+ <tr><td><code><![CDATA[<ul>
+ <li>Premièrement</li>
+ <li>Deuxièmement</li>
+</ul> ]]></code></td> <td><ul>
+<li>Premièrement</li>
+<li>Deuxièmement</li>
+</ul>
+</td></tr>
+ </table>
+ </div>
+<p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
+ ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
+ balise <em>fermante</em>. On peut
+ écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
+ <tt><![CDATA[<toto></toto>]]></tt>.
+</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Historique du langage HTML</h1>
+<table class="desc">
+ <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
+IBM. Introduction de la notion de balise.</td></tr>
+<tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
+<tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
+netscape, ... ) interprètent le standard de manière
+différente</td></tr>
+<tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
+documents semi-structurés (SGML simplifié)</td></tr>
+<tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
+ XML</td></tr>
+<tr><td>2008</td><td> Première proposition pour le nouveau standard,
+ HTML5</td></tr>
+<tr><td>2014</td><td>Standardisation de HTML5</td></tr>
+</table>
+ </div>
+
+ <div class="sws-slide">
+ <h1>XHTML <i>vs</i> HTML</h1>
+ <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
+ <ul>
+ <li>
+ Les balises sont <em>bien parenthésées</em>
+ (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red"></b></span></tt> est interdit)
+ </li>
+ <li>Les balises sont en minuscules</li>
+ </ul>
+ <p>Les avantages sont les suivants</p>
+ <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
+ pas fermer certaines balise … Les navigateurs corrigent ces
+ erreurs de manières <em>différentes</em></li>
+ <li>Le document est <em>structuré</em> comme un programme
+ informatique (les balises ouvrantes/fermantes correspondent à
+ { et }). Plus simple à débugger.</li>
+ </ul>
+ </div>
+<div class="sws-slide">
+ <h1>Rôle d'(X)HTML</h1>
+ <p>Séparer la <em>structure</em> du document de
+ son <em>rendu</em>. La structure donne une <em>sémantique</em> au
+ document :</p>
+ <ul>
+ <li>ceci est un titre</li>
+ <li>ceci est un paragraphe</li>
+ <li>ceci est un ensemble de caractères importants</li>
+ </ul>
+ <p>Cela permet au navigateur d'assurer un rendu en fonction de la
+ sémantique. Il existe différents types de rendus:</p>
+ <ul>
+ <li>graphique interactif (Chrome, Firefox, Internet Explorer,
+ …)</li>
+ <li>texte interactif (Lynx, navigateur en mode texte)</li>
+ <li>graphique statique (par ex: sur livre électronique)</li>
+ <li>rendu sur papier</li>
+ <li>graphique pour petit écran (terminal mobile)</li>
+ </ul>
+</div>
+<div class="sws-slide">
+ <h1>Exemple de document</h1>
+ <p style="text-align:center;font-size:smaller;">(liste des balises
+ données sur la feuille de TD 4!)</p>
+<div style="margin-left:10%;">
+<code style="font-size:smaller;"><![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
+ <head>
+ <title>Un titre</title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ </head>
+ <body>
+ <h1>Titre de section</h1>
+ <p> premier paragraphe de texte. On met
+ un <a href="http://www.lri.fr">lien</a> ici.
+ </p>
+ <!-- on peut aussi mettre des commentaires -->
+ </body>
+ </html>]]></code>
+</div>
+</div>
+ </body>
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>CSS</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a href="prog_internet_04.xhtml" class="sws-previous"/>
+
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 5</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+ <h1>Introduction</h1>
+ <div class="sws-slide">
+ <h1>Cascading Style Sheets (CSS)</h1>
+ <table class="desc">
+ <tr>
+ <td >CSS</td> <td>
+ Langage permettant de décrire le <em>style graphique</em>
+ d'une page HTML
+ </td>
+ </tr>
+ </table>
+ <p>On peut appliquer un style CSS</p>
+ <ul>
+ <li> À un élément en
+ utilisant <em>l'attribut <code>style</code></em></li>
+ <li> À une page en utilisant
+ l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
+ dans l'en-tête
+ du document (dans la
+ balise <code><![CDATA[<head>...</head>]]></code>).
+ </li>
+ <li>À un ensemble de pages en référençant un fichier de style
+ dans chacune des pages
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>L'attribut <tt>style</tt></h1>
+ <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
+ </code>
+ <p>Apperçu: </p>
+ <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
+ <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
+ </p>
+ <p class="sws-pause">Inconvénients :</p>
+ <ul> <li>il faut copier l'attribut
+ style pour tous les liens de la page</li>
+ <li>modification de tous les éléments difficiles</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1>L'élément <tt>style</tt></h1>
+ <code><![CDATA[ <html>
+ <head>
+ <title>…</title>
+ <style>
+]]> <em>a { color: red; }</em>
+<![CDATA[ </style>
+ </head>
+ <body>
+ <a href="…">Lien 1</a> <a href="…">Lien 2</a>
+ </body>
+ </html>]]></code>
+ <p>Apperçu :</p>
+ <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
+ <a href="…" style="color:red;text-decoration:underline;">Lien
+ 1</a>
+ <a href="…" style="color:red;text-decoration:underline;">Lien 2
+ </a>
+ </p>
+ <p>Inconvénient : local à une page</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Fichier <tt>.css</tt> séparé</h1>
+ <p>Fichier <tt>style.css</tt>:</p>
+ <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
+ <code >a { color: red; }</code>
+ </p>
+ <p>Fichier <tt>test.html</tt>:</p>
+ <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
+ <code > <![CDATA[<html>
+ <head>
+ …
+ ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
+<![CDATA[ </head>
+ …
+ </html>]]></code>
+ </p>
+ <p class="sws-pause">Modifications & déploiement aisé</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Syntaxe</h1>
+ <p>Une <em>propriété</em> CSS est définie en utilisant la
+ syntaxe:
+ </p>
+ <p style="text-align:center"><tt> nom_prop : val_prop
+ ; </tt></p>
+ <ul>
+ <li>Si on utilise l'attribut <tt>style</tt> d'un
+ élément:<code>
+ <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
+ </code>
+ </li>
+ <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
+ style:<code>
+ a {
+ <em>color : red;
+ border-style: solid;
+ border: 1pt;</em>
+ }
+ h1 { /* Le style des titres de niveau 1 */
+ text-decoration: underline;
+ color: green;
+ }
+</code></li>
+ </ul>
+ </div>
+<h1>Boîtes</h1>
+ <div class="sws-slide">
+ <h1> Unités de longueur</h1>
+ <p>CSS permet de spécifier des longueurs comme valeurs de
+ certaines propriétés (position et taille des éléments, épaisseur
+ des bordures, …). Les longueurs <em>doivent</em> comporter une
+ unité. Les unités reconnues sont:</p>
+ <table class="desc">
+ <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
+ <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
+ <tr><td>cm</td> <td>centimètre</td> </tr>
+ <tr><td>mm</td> <td>millimètre</td> </tr>
+ <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
+ <tr><td>pc</td> <td>pica (12 points)</td></tr>
+ <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
+ courante</td></tr>
+ <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
+ de la police courante</td></tr>
+ <tr><td>%</td> <td>pourcentage d'une valeur particulière
+ (définie par propriété)</td></tr>
+ <tr><td >vh</td> <td class="css3"><i>viewport height</i> (% de la
+ hauteur de la partie visible de la page)</td></tr>
+ <tr style="background:white"><td>vw</td> <td class="css3"><i>viewport
+ width</i> (% de la largeur de la partie visible de la
+ page)</td></tr>
+ </table>
+ </div>
+
+
+ <div class="sws-slide">
+ <h1>Boîte</h1>
+
+ <p >Chaque élément de la page HTML possède une <em>boîte
+ rectangulaire</em> qui délimite le contenu de l'élément:
+ </p>
+ <div style="text-align:center;vertical-align:text-bottom;">
+ <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
+ 25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
+ <span id="b1" style="display:inline-block;
+ color:black;
+ padding:0 4vh 4vh 4vh;
+ border:dotted 2pt black;"><i>margin</i> (marge)<br/>
+ <span id="b2" style="display:inline-block;
+ padding:0 4vh 4vh 4vh;
+ color:white;background:black">
+ <i>border</i> (bordure)<br/>
+ <span id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
+ background:white;color:black;border:dotted
+ 2pt black">
+ <i>padding</i> (ajustement)<br/>
+ <span style="border:dotted 2pt black;
+ background:white;
+ position:relative;
+ display:inline-block;
+ font-size:15vh;
+ width:2.8em;
+ height:12vh;">
+ <span style="color:red;
+ top:-5vh;
+ left:0vh;
+ position:absolute;
+ text-decoration:underline;
+ padding:0 0 0 0;
+ margin: 0 0 0 0;
+ ">Lien 1
+ </span>
+ </span>
+ </span>
+ </span>
+ </span>
+ </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
+ height<br/><br/><br/><br/>↓
+ </span>
+ </div>
+ <script type="text/javascript">
+ function all(e) {
+ return $(e).children("*").addBack()
+ }
+ function hide(e) {
+ all(e).css('visibility', 'hidden');
+ };
+ function show(e) {
+ all(e).css('visibility', 'visible');
+ }
+ SWS.Presentation.registerCallback("0", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
+
+ });
+ SWS.Presentation.registerCallback("1", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("2", function(c) {
+ hide(".b0");hide("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("3", function(c) {
+ hide(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("4", function(c) {
+ show(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ </script>
+ <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
+ <tt>(height|width) = padding + margin + border + t</tt>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Marge, bordure, ajustement</h1>
+ <p>On peut spécifier jusqu'à 4 valeurs:</p>
+ <ul><li>1 valeur: toutes les dimensions égales à cette
+ valeur</li>
+ <li>2 valeurs: haut et bas égal à la première valeur, gauche
+ et droite égale à la deuxième</li>
+ <li>3 valeurs: haut à la première valeur, gauche
+ et droite égale à la deuxième, bas égal à la troisième</li>
+ <li>4 valeurs: haut, droit, bas, gauche</li>
+ </ul>
+ <code style="font-size:smaller;"> span {
+ padding:10pt 20pt 5pt 0pt;
+ margin:10pt 5pt;
+ border-width:3pt;
+ border-color:red blue green;
+ border-style:solid dotted;
+ } </code>
+ <div style="text-align:center;">Du <span style="padding:10pt
+ 20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1>Modes d'affichage</h1>
+ <p>La propriété <em><i>display</i></em> contrôle le mode
+ d'affichage d'un élément:
+ </p>
+ <table class="desc">
+ <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
+ pas d'espace</td></tr>
+ <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
+ courante, dans le flot de texte. La taille du contenu (avec
+ les marges, ajustements et bordures) dicte la
+ taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
+ ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
+ sont <i>inline</i> par défaut). </td></tr>
+ <tr><td>block</td><td>l'élément est placé seul sur sa
+ ligne. La taille est calculée automatiquement mais peut être
+ modifiée par <tt>width</tt> et <tt>height</tt>
+ (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
+ sont <i>block</i> par défaut)</td></tr>
+ <tr><td>inline-block</td><td>positionné comme <i>inline</i>
+ mais la taille peut être modifiée comme pour <i>block</i></td></tr>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Modes d'affichage (exemples)</h1>
+ <div>
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <tt>a { display: inline; … } </tt>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
+ <div >
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <tt>a { display: block; … } </tt>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="display:block;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
+ <div>
+ <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
+ <code>a { display: inline-block;
+ width: 4em;
+ height: 2em;
+ … } </code>
+ </div>
+ <div style="width:50%;float:left;">
+ Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 1</span>,
+ le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 2</span> et
+ le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
+ blue;color:blue;text-decoration:underline;">lien 3</span>.
+ </div>
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1>Positionnement</h1>
+ <p>Le type de positionnement est donné par la
+ propriété <em>position</em></p>
+ <table class="desc">
+ <tr><td>static</td><td>positionnement « automatique
+ » </td></tr>
+ <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
+ du navigateur (la boîte est supprimée du flot)</td></tr>
+ <tr><td>relative</td><td>positionnement « relatif » par
+ rapport à la position normale</td></tr>
+ <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
+ à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
+ </table>
+ <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
+ les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
+ et <tt>right</tt> dénotent les décalages respectifs.
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Positionnement (exemple)</h1>
+ <div>
+ <div style="45%;margin:0 4%;float:left;"><code>
+<span style="color:#02a"> a { position: static;
+ … }</span>
+<span style="color:#0a2"> a { position: fixed;
+ right:10pt;
+ top: 10pt;
+ }</span></code></div>
+ <div style="width:50%;float:left;"><code>
+<span style="color:#a20"> a { position: relative;
+ left: 10pt;
+ bottom: -5pt;
+ … }</span>
+<span style="color:#a2a"> a { position:absolute;
+ right:0pt;
+ bottom: 10pt;
+ }</span></code>
+ </div><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code>
+ </div><br/>
+ <ul style="position:relative;float:right;background:#ddd;">
+ <li>Positionnement <span style="position:static;color:#02a">static</span></li>
+ <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
+ (right:10pt,top:10pt)</span></li>
+ <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
+ (left:10pt,bottom:-5pt)</span></li>
+ <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
+ (right:10pt,bottom:10pt)</span></li>
+
+ </ul>
+ </div>
+ <h1>Autres propriétés</h1>
+ <div class="sws-slide">
+ <h1>Couleurs</h1>
+ <p>Les couleurs peuvent être données:</p>
+ <ul>
+ <li>par nom
+ symbolique: <span style="color:red">red</span>,
+ <span style="color:blue">blue</span>,
+ <span style="color:purple">purple</span>,
+ …</li>
+ <li>en
+ hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
+ <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
+ <li>en
+ décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
+ avec <tt>0 ≤ x,y,z ≤ 255</tt></li>
+ <li class="css3">en
+ décimal avec
+ transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
+ a)</tt>,
+ avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
+
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Propriétés du texte</h1>
+ <p>Certaines propriétés permettent d'alterer le rendu du texte
+ d'un élément</p>
+ <table class="desc">
+ <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
+ (orientation du texte)</td></tr>
+ <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
+ </td></tr>
+ <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
+ <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
+ <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Propriétés de la police</h1>
+ <table class="desc">
+ <tr><td>font-family</td><td>liste de nom de polices séparées
+ par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
+ <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt> </td></tr>
+ <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
+ <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
+ soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
+ <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
+</td></tr>
+ </table>
+ <p class="css3" >On peut aussi spécifier un descripteur de
+ police</p>
+ <code>
+ @font-face {
+ font-family: Toto;
+ src: url(toto.ttf);
+ }
+ a { font-family: Toto; }
+ </code>
+ </div>
+ <h1>Selecteurs</h1>
+ <div class="sws-slide">
+ <h1>Selecteurs</h1>
+ <p>On peut sélectionner finement les éléments auxquels un style
+ s'applique</p>
+ <table class="desc">
+ <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
+ est <tt>x</tt></td></tr>
+ <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
+ l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
+ <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
+ <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
+ <tr> <td><tt>X Y</tt></td> <td>tous les éléments
+ selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
+ sélectionnés par <tt>X</tt></td></tr>
+ <tr> <td><tt>X > Y</tt></td> <td>tous les éléments dont
+ selectionné par <tt>Y</tt> qui sont des fils d'éléments
+ sélectionnés par <tt>X</tt></td></tr>
+ <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
+ visités</td></tr>
+ <tr><td><tt>a:link</tt></td><td>les liens non
+ visités</td></tr>
+ <tr><td><tt>X:hover</tt></td><td>élément selectionné
+ par <tt>X</tt> et survollé par la souris</td></tr>
+ </table>
+ <code> div.foo ul li a:visited { color: red; } </code>
+ </div>
+ </body>
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>PHP : Introduction</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a href="prog_internet_05.xhtml" class="sws-previous"/>
+
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 6</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <h1>Introduction et généralités</h1>
+
+ <div class="sws-slide">
+ <h1>Avant PHP</h1>
+ <p>Constat: besoin de pages Web <em>dynamiques</em> (contenu
+ généré au chargement de la page)<br/>
+ Première solution: scripts (ou programmes) <em>CGI</em><br/>
+ <code> http://www.example.com/foo.cgi?sort=alpha</code>
+ </p>
+ <ol>
+ <li>Programme écrit dans n'importe quel langage et exécuté par
+ le serveur Web</li>
+ <li>Le serveur passe les infos au programme par
+ des <em>variables d'environnement</em> et <em>l'entrée
+ standard</em></li>
+ <li>Le programme génère une page Web par affichage sur la
+ sortie standard</li>
+ </ol>
+ <p class="sws-pause">Inconvénients</p>
+ <ol>
+ <li>Communication difficile entre le serveur Web et le
+ programme</li>
+ <li>Les langages généralistes <em>ne sont pas faits pour le
+ Web</em> (pas de support d'HTML nativement par exemple)</li>
+ </ol>
+ </div>
+
+ <div class="sws-slide">
+ <h1>PHP (Avantages)</h1>
+ <ul>
+ <li> <em>Langage utilisé côté serveur</em> : le navigateur ne
+ « voit » jamais de PHP, uniquement du HTML (comportement
+ indépendant du navigateur)</li>
+ <li> <em>Langage interprété</em> : on ne génère pas de
+ binaire, déploiment facile (on copie les fichiers sur le
+ serveur)</li>
+ <li> <em>Intégration avec HTML</em> : PHP supporte
+ des <em><i>templates</i></em> (modèles/patrons) HTML contenant
+ du PHP</li>
+ </ul>
+ <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[ <html>
+ <head><title>Heure</title></head>
+ <body>
+ <h1>L'heure</h1>
+ <p>Il est ]]><span style="color:orange;"><?php echo date('H:i:s'); ?></span> <![CDATA[</p>
+ </body>
+ </html>]]></code>
+ </div>
+ <div class="sws-slide">
+ <h1>PHP</h1>
+ <ul>
+ <li>On compte 140,000,000 de noms de domaines enregistrés</li>
+ <li>On estime à environ 20,000,000 le nombre de sites faits en
+ PHP</li>
+ <li>Quelques gros sites:
+ <ul><li>Facebook</li>
+ <li>Portail Yahoo!</li>
+ <li>Flickr</li>
+ <li>Digg</li>
+ <li>Wikipedia</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Principe</h1>
+ <ul>
+ <li class="sws-onframe-1-5">Le serveur Web crée un fichier temporaire. Il copie le
+ contenu de <tt>heure.php</tt> jusqu'à trouver la balise <tt style="color:orange"><?php</tt>
+ </li>
+ <li class="sws-onframe-2-5">Le code se trouvant
+ entre <tt style="color:orange"><?php</tt>
+ et <tt style="color:orange">?></tt> est exécuté.</li>
+ <li class="sws-onframe-3-5">Tout ce que le code écrit
+ (instruction <tt style="color:orange">echo</tt>) est aussi
+ copié dans le fichier temporaire</li>
+ <li class="sws-onframe-4-5">Le serveur web reprend la copie du fichier
+ après <tt style="color:orange">?></tt>
+ </li>
+ <li class="sws-onframe-5">Le serveur renvoie le contenu du fichier temporaire comme
+ page au client</li>
+ </ul>
+ <div class="sws-onframe-0-5" style="background:white;margin:0% 5%;border:solid 1pt gray">
+<code><span class="sws-onframe-1-5"><![CDATA[ <html>
+ <head><title>Heure</title></head>
+ <body>
+ <h1>L'heure</h1>
+ <p>Il est ]]></span><span class="sws-onframe-3-5"
+ style="color:orange;">15:53:00</span><span class="sws-onframe-4-5"> <![CDATA[</p>
+ </body>
+ </html>]]></span></code>
+ </div>
+ </div>
+
+ <div class="sws-slide">
+ <h1>PHP (inconvénients)</h1>
+ <ol><li>Génère du HTML via <tt><em>echo</em></tt> (débuggage
+ difficile)</li>
+ <li>Interprété : problème de performances si beaucoup de
+ clients</li>
+ <li><em><b>NON TYPÉ</b></em> : <em style="color:red">C'est
+ HORRIBLE</em></li>
+ </ol>
+ <p>Devinette : qu'affiche l'instruction suivante ? (on ne
+ connaît pas encore PHP mais on peut utiliser son intuition)</p>
+ <code> echo 013 + "013 c'est en fait 11 en base 8"; </code>
+ <ul style="background:white">
+ <li>013</li>
+ <li>13</li>
+ <li>013 c'est en fait 11 en base 8</li>
+ <li>013013 c'est en fait 11 en base 8</li>
+ <li>13013 c'est en fait 11 en base 8</li>
+ <li><span style="position:relative;"> <span class="sws-onframe-0"
+ style="position:absolute;
+ left:0;">24</span><span class="sws-onframe-1-2"
+ style="position:absolute;
+ left:0;"><em>24 ✔✔✔</em></span></span></li>
+ <li>une erreur</li>
+ <li>autre chose</li>
+ </ul>
+ </div>
+ <h1>Types de base et expressions simples</h1>
+ <div class="sws-slide">
+ <h1>Entiers (<tt>integer</tt>)</h1>
+ <p>Les entiers ont une taille fixe (généralement 32bits) : </p>
+ <table class="desc">
+ <tr><td>Notation décimale</td><td>10, 3444, -25, 42,
+ …</td></tr>
+ <tr><td>Notation binaire</td><td>0b10, -0b10001010,
+ …</td></tr>
+ <tr><td>Notation octale</td><td>0755, -01234567, …</td></tr>
+ <tr><td>Notation hexadécimale</td><td>0x12b, -0xb00b5,
+ 0xd34db33f, …</td></tr>
+ </table>
+ <p>Opérateurs arithmétiques : </p>
+ <table class="desc">
+ <tr><td>-</td><td> « Moins » unaire </td></tr>
+ <tr><td>+, -, *, % </td><td>addition, soustraction, produit, modulo</td></tr>
+ <tr><td><span style="color:red">/</span></td><td>Division. Si
+ <tt>x</tt> et <tt>y</tt> sont des entiers et que <tt>y</tt>
+ divise <tt>x</tt> alors <tt>x/y</tt> renvoie
+ un <em style="color:red">entier</em> sinon <tt>x/y</tt> renvoie
+ un <em style="color:red">flottant</em>!
+ </td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Booléens (<tt>boolean</tt>)</h1>
+ <table class="desc">
+ <tr><td>TRUE/FALSE</td><td>vrai/faux (en majuscules)</td></tr>
+ </table>
+ <p>Opérateurs logiques :</p>
+ <table class="desc">
+ <tr><td>!</td><td> négation (unaire) </td></tr>
+ <tr><td>&&, || </td><td>« et » logique, « ou » logique</td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Flottants (<tt>float</tt>)</h1>
+ <table class="desc">
+ <tr><td>Notation scientifique</td><td>1.3, 0.99, 00.34e102, -2313.2313E-23,
+ …</td></tr>
+ </table>
+ <p>Opérateurs arithmétiques : </p>
+ <table class="desc">
+ <tr><td>-</td><td> « Moins » unaire </td></tr>
+ <tr><td>+, -, *, /, % </td><td>opérations standard</td></tr>
+ <tr><td>abs, sin, cos, sqrt, pow, …</td><td>fonctions
+ mathématiques pré-définies </td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Variables, affectations</h1>
+ <ul>
+ <li>Un nom de variable commence toujours
+ par <tt><em>$</em></tt></li>
+ <li>Pas besoin de donner le type, l'affectation détermine le
+ type</li>
+ </ul>
+ <p>Exemples :</p>
+ <code> $foo = 123;
+ $bar = 1323e99;
+ $_toto = $bar;
+</code>
+ </div>
+ <div class="sws-slide">
+ <h1>Chaînes de caractères (<tt>string</tt>)</h1>
+ <table class="desc">
+ <tr><td>Simples quotes</td><td> <tt>'foo'</tt>, <tt>'c\'est
+ moi'</tt>, <tt>'Un antislash : \\'</tt>, …<br/>
+ <em style="color:orange">Pas d'autre séquence d'échappement</em>
+ </td></tr>
+ <tr><td style="width:8em;">Doubles quotes</td><td><tt>"foo"</tt>, <tt>"c'est
+ moi"</tt>, <tt>"Un retour chariot: \n"</tt>, <tt>"La variable
+ \$toto contient: $toto"</tt><br/>
+ <em style="color:orange">Les séquences d'échapement sont:
+ \n, \t, \\, \", \$. Les variables (sous-chaînes
+ commençant par un $) sont remplacées par leur valeur.
+ </em>
+ </td></tr>
+ </table>
+ <p>Opérations sur les chaînes : </p>
+ <table class="desc">
+ <tr><td>$foo[10]</td><td> accès au 11<sup>ème</sup> caractère </td></tr>
+ <tr><td>$foo[10] = 'A';</td><td> mise à jour</td></tr>
+ <tr><td> . </td><td>concaténation</td></tr>
+ <tr><td>strlen</td><td>longueur</td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Tableaux (<tt>array</tt>)</h1>
+ <p>Les tableaux sont des tableaux <em>associatifs</em> : </p>
+ <table class="desc" >
+ <tr><td>array()</td><td>crée un tableau vide</td></tr>
+ <tr><td style="width:14.5em;">array(<tt>k<sub>1</sub> => v<sub>1</sub>, …,
+ k<sub>n</sub> => v<sub>n</sub> </tt>)</td>
+ <td>créé un nouveau tableau pour lequel
+ l'entrée <tt>k<sub>i</sub></tt> est associée à la
+ valeur <tt>v<sub>i</sub></tt>
+ </td>
+ </tr>
+ <tr><td>array(<tt>v<sub>1</sub>, …, v<sub>n</sub> </tt>)</td>
+ <td>créé un nouveau tableau pour lequel
+ l'entier <tt>i-1</tt>
+ valeur <tt>v<sub>i</sub></tt>
+ </td>
+ </tr>
+ </table>
+ <p>Quelques fonctions : </p>
+ <table class="desc" style="background:white;">
+ <tr><td style="width:7em;">count</td><td> taille du tableau (nombre d'éléments)</td></tr>
+ <tr><td>sort, rsort</td><td> trie un tableau (<tt>rsort</tt> trie par
+ ordre décroissant) par valeurs. Les clés sont supprimées et
+ de nouvelles clées de 0 à longueur - 1 sont crées</td></tr>
+ <tr><td>ksort, krsort</td><td>trie un tableau par
+ clés</td></tr>
+ <tr><td>print_r</td><td>affiche un tableau (ne pas utiliser <tt>echo</tt>)</td></tr>
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Tableaux (exemples)</h1>
+ <code> $tab1 = <em>array()</em>; //tableau vide
+ $tab2 = <em>array("zero", "un", "deux", "trois");</em>
+ $tab3 = <em>array("pi" => 3.14159, "e" => 2.71828; "phi" => 1.61803)</em>;
+ echo <em>$tab2[0]</em>; //affiche zero
+ echo <em>$tab3["phi"]</em>; //affiche 1.61803
+ <em>$tab1["dix"] = 10</em>; //affectation
+ <em>sort($tab2)</em>;
+ echo <em>$tab2[0]</em>;//affiche deux
+ <em>sort($tab3)</em>;
+ echo $tab3[0]; //affiche 1.61803
+ echo $tab3[1]; //affiche 2.71828
+ echo $tab3[2]; //affiche 3.14159
+ echo <em>count($tab2)</em>; //affiche 4 </code>
+ </div>
+ <div class="sws-slide">
+ <h1>NULL</h1>
+ <p><em>NULL</em> est une <em>constante</em> spéciale, de
+ type <em>NULL</em>. C'est la valeur d'une variable non déclarée
+ ou d'un accès invalide dans un tableau.</p>
+ <code> $a = $b; // $b n'est pas déclarée, $a reçoit NULL
+ $c = $tab["toto"]; // $tab existe mais n'a pas de valeur
+ // associée à la clé "toto", $c reçoit NULL
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Conversions de types</h1>
+ <p><span style="color:red;">☠☢☣☹</span> :
+les conversions se
+ font <em style="color:red;">implicitement</em>, en fonction du
+ contexte.
+ </p>
+ <table class="desc">
+ <tr> <td style="width:5em;">Booléen</td> <td>0, 0.0, "", "0", <tt>NULL</tt>, et le tableau
+ vide sont convertis en <tt>FALSE</tt>, le reste
+ en <tt>TRUE</tt> (en particulier "00" vaut <tt>TRUE</tt>
+ ☹)</td> </tr>
+ <tr><td>Entier</td><td> <tt>FALSE</tt> ⇝ 0, <tt>TRUE</tt> ⇝ 1,
+ les flottants sont arrondis par partie entière (1.23242 ⇝
+ 1). Les chaînes <em style="color:red">dont un préfixe</em>
+ est un entier sont converties en cet entier, sinon en 0 ("123
+ bonjour" ⇝ 123) </td>
+ </tr>
+ <tr><td>Chaîne</td> <td> La chaîne contient la représentation
+ de la valeur (<tt> 1 . "ABC" </tt>
+ ⇝ <tt>"1ABC"</tt>). <tt>FALSE</tt> et <tt>NULL</tt> sont
+ convertis en <tt>""</tt>, <tt>TRUE</tt> converti en <tt>"1"</tt></td></tr>
+ </table>
+ <p> La réponse à la devinette : 013 + "013 c'est 11 en octal" : </p>
+ <ul style="background:white;">
+ <li> 013 ⇝ notation octale pour l'entier décimal 11 </li>
+ <li> "013 c'est 11 en octal" chaîne de caractères utilisées
+ dans une addition (contexte entier), le préfixe "013" est
+ transformé en <span style="color:red">décimal</span> 13</li>
+ <li> 11 + 13 ⇝ 24 (ça au moins ça a du sens)</li>
+ </ul>
+
+ </div>
+ <div class="sws-slide">
+ <h1>Comparaisons</h1>
+ <p>Opérateurs de comparaisons</p>
+ <table class="simple">
+ <tr><td style="width:2em;"><em>Opérateur</em></td> <td style="width:13em;"><em>Description</em></td></tr>
+ <tr><td><tt> $a == $b </tt></td> <td >Égal, après conversion
+ de type </td></tr>
+ <tr><td><tt> $a != $b </tt></td> <td>Différent, après conversion
+ de type
+ </td></tr>
+ <tr><td><tt> $a === $b </tt></td> <td>Égal et de même type
+ </td></tr>
+ <tr><td><tt> $a !== $b </tt></td> <td>Différent ou de type différent
+ </td></tr>
+ <tr><td><tt> $a < $b </tt></td> <td>Strictement plus petit,
+ après conversion de type
+ </td></tr>
+ <tr><td><tt> $a > $b </tt></td> <td>Strictement plus grand,
+ après conversion de type
+ </td></tr>
+ <tr><td><tt> $a <= $b </tt></td> <td>Plus petit,
+ après conversion de type
+ </td></tr>
+ <tr><td><tt> $a >= $b </tt></td> <td>Plus grand,
+ après conversion de type
+ </td></tr>
+ </table>
+ <p>On comparera <em style="color:red;">TOUJOURS</em> des valeurs
+ de <em style="color:red;">MÊME TYPE</em></p>
+ </div>
+ <div class="sws-slide">
+ <h1>Affichage</h1>
+ <p>On utilise l'instruction <tt><em>echo</em></tt> pour écrire
+ du texte dans la page HTML résultante : </p>
+ <table class="simple" border="1" style="margin-left:10vh; border-collapse:collapse;border-spacing: 2pt 2pt" >
+ <tr style="boder-width:0pt 0pt 3pt 0pt;
+ border-color: gray;
+ border-style: solid " >
+ <td style="width: 10em;"><em>Code PHP</em></td>
+ <td style="width: 7em;" ><em>Code HTML</em></td>
+ <td><em>Affichage dans le navigateur</em></td>
+ </tr>
+ <tr>
+ <td><tt>echo "Hello";<br/>
+ echo "World";</tt></td>
+ <td> HelloWorld</td>
+ <td>HelloWorld</td></tr>
+ <tr>
+ <td><tt>echo "Hello\n";<br/>
+ echo "World";</tt></td>
+ <td> Hello<br/>World</td>
+ <td>Hello World</td></tr>
+ <tr><td><tt>echo "Hello<br/>";<br/>
+ echo "World";</tt></td>
+ <td> Hello<tt><br/></tt>World</td>
+ <td>Hello<br/>World</td></tr>
+ </table>
+ </div>
+ <h1>Structures de contrôle</h1>
+ <div class="sws-slide">
+ <h1>Conditionnelle: <tt>if else</tt></h1>
+ <code>
+ <em>if (</em> c <em>) {</em>
+ // cas then
+ <em> } else { </em>
+ // cas else
+ <em>};</em>
+ </code>
+ <p>Les <em>parenthèses</em> autour de la condition <tt>c</tt> sont
+ obligatoires. La branche <tt><em>else { … }</em></tt> est
+ optionnelle. Les accolades sont optionnelles pour les blocs
+ d'une seule instruction</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Boucles</h1>
+ <div class="sws-pause">
+ <code> <em>while (</em> c <em>) {</em>
+ //corps de la boucle while
+ <em>};</em></code>
+ </div>
+ <div class="sws-pause">
+ <code>
+ <em>do {</em>
+ //corps de la boucle do
+ <em>} while (</em> c <em>);</em></code>
+ </div>
+
+ <div class="sws-pause">
+ <code>
+ <em>for(init ; test ; incr) {</em>
+ //corps de la boucle for
+ <em>};</em></code>
+ </div>
+ <div class="sws-pause">
+ <code>
+ <em>foreach($tab as $key => $val) {</em>
+ //corps de la boucle foreach
+ //$tab est un tableau, $key une clé et $val la valeur associée
+ <em>};</em></code>
+ </div>
+ <p style="background:white;">Remarque: <tt>ksort</tt> et <tt>krsort</tt> influencent
+ l'ordre de parcours par une boucle <tt>foreach</tt></p>
+ </div>
+ <div class="sws-slide">
+ <h1><tt>break</tt> et <tt>continue</tt></h1>
+ <table class="desc">
+ <tr><td><tt>break</tt></td>
+ <td>sort de la boucle
+ immédiatement</td> </tr>
+ <tr> <td><tt>continue</tt></td> <td>reprend à l'itération
+ suivante</td>
+ </tr>
+ </table>
+ <code>
+ for($i = 0; $i < 10; $i = $i + 1){
+ if ($i == 2 || $i == 4) continue;
+ if ($i == 7) break;
+ echo $i . ' ';
+ }
+ </code>
+ <p>Affiche 0 1 3 5 6</p>
+ </div>
+ <h1>Passage de paramètres depuis une page</h1>
+ <div class="sws-slide">
+ <h1>Formulaire HTML (version simple)</h1>
+ <p>L'élément <tt><em><form></em></tt> permet de créer des formulaires HTML. Un
+formulaire est constitué d'un ensemble de widgets (zones de saisies
+de textes, boutons, listes déroulantes, cases à cocher, ... ) et d'un
+bouton submit. Lorsque l'utilisateur appuie sur le bouton, les
+données du formulaires sont envoyées au serveur. Exemple, fichier
+<tt>age.html</tt> :</p>
+<code><![CDATA[
+ <html>
+ <body>
+ <form method="get" action="calcul.php">
+ Entrez votre année de naissance: <input type="text" name="val_age"/>
+ <input type="submit" />
+ </form>
+ </body>
+ </html>
+ ]]></code>
+</div>
+<div class="sws-slide">
+ <h1>Paramètres</h1>
+ <p>
+ Les paramètres envoyés au serveur web par la méthode <tt>get</tt>, sont
+ accessibles en PHP dans la variable globale <tt><em>$_GET</em></tt>. C'est un tableau
+ qui associe au nom d'un input sa valeur.
+ Exemple : <tt>calcul.php</tt></p>
+<code><![CDATA[
+ <html>
+ <body>
+ <?php
+ echo "Vous êtes né il y a ";
+ echo "<b>";
+ echo date("Y") - ]]><em>$_GET["val_age"]</em><![CDATA[;
+ echo "</b> ans";
+ echo "<br/>";
+ ?>
+ </body>
+ </html>
+ ]]></code>
+</div>
+ </body>
+
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>PHP : Fonctions</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
+ <script src="../libs/raphael-min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a href="prog_internet_06.xhtml" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 7</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <h1>Définitions de fonctions</h1>
+
+ <div class="sws-slide">
+ <h1>Fonctions</h1>
+ <p>Les fonctions sont déclarées à l'aide du
+ mot-clé <tt><em>function</em></tt>. On renvoie des résultats à
+ l'aide du mot-clé <tt><em>return</em></tt>.</p>
+ <code><![CDATA[
+ <?php
+ ]]><em>function</em> double ($x)
+ <em>{</em>
+ <em>return</em> $x + $x;
+ <em>}</em>
+
+ echo double(10);
+ <![CDATA[?>]]>
+ </code>
+ </div>
+
+
+ <div class="sws-slide">
+ <h1>Portée des variables locales et globales
+ <b style="color:red">⚠</b>
+ </h1>
+ <div id="cont2" style="width:100%;position:relative;"
+ onresize="draw_arrows();" >
+ <div id="left2" style="display:inline-block;width:50%; position:relative;
+ box-sizing:border-box;
+ padding: 0 1em 0 2em;
+ border-style:dashed;
+ border-width: 0 1pt 0 0;
+ border-color:gray; float:left;">
+<code> <?php
+ <em style="color:red">$a</em> = 42;
+ function add_a($x)
+ {
+ <span id="leftend" />
+ return $x + <em style="color:red">$a</em>;<span id="leftstart" />
+ }
+ echo add_a(10);
+ ?>
+</code>
+ </div>
+ <div id="right2" style="display:inline-block;
+ width:50%; position:relative;
+ box-sizing:border-box;
+ padding: 0 2em 0 1em;
+ vertical-align:text-top;
+ ">
+<code > <?php
+ <em>$a</em> = 42;<span id="rightend"/>
+ function add_a($x)
+ {
+ <em>global $a</em>;<span id="rightmid"/>
+ return $x + <em>$a</em>;<span id="rightstart"/>
+ }
+ echo add_a(10);
+ ?>
+</code>
+ </div>
+ </div>
+
+ <script type="text/javascript">
+
+ function overlay(id) {
+ var w = $("#" + id)[0].offsetWidth;
+ var h = $("#" + id)[0].offsetHeight;
+ $("#svg_"+id).remove();
+ var paper = Raphael(id, w, h);
+ paper.canvas.id = "svg_" + id;
+ return paper;
+ };
+
+ function curve_to(paper, start, end, style) {
+ var x1 = $(start)[0].offsetLeft;
+ var y1 = $(start)[0].offsetTop;
+ var x2 = $(end)[0].offsetLeft;
+ var y2 = $(end)[0].offsetTop;
+
+ var path_cmd =
+ "M" + x1 + " " + y1 + " S" + x1 + " " + y2 + " " + x2 + " " + y2;
+ var p1 = paper.path(path_cmd);
+ p1.attr(style);
+
+ };
+
+ function draw_arrows(x) {
+
+ var paper = overlay("left2");
+ $("#svg_left2").css ( { 'z-index': '2', 'top':'0', 'left':'0', 'position':'absolute' } );
+
+ curve_to (paper, "#leftstart", "#leftend", { 'stroke': "red",
+ 'stroke-dasharray' : "-",
+ 'stroke-width': 2,
+ 'arrow-end' : "block-wide-long" });
+
+ var paper = overlay("right2");
+ $("#svg_right2").css({ 'z-index': '2', 'top':'0', 'right':'0', 'position':'absolute' });
+
+ curve_to (paper, "#rightstart", "#rightmid", { 'stroke': "green",
+ 'stroke-width': 2,
+ 'arrow-end' : "block-wide-long" });
+ curve_to (paper, "#rightmid", "#rightend", { 'stroke': "green",
+ 'stroke-width': 2,
+ 'arrow-end' : "block-wide-long" });
+ };
+ SWS.Presentation.registerCallback(0, draw_arrows);
+ </script>
+ <p>Le code de gauche <em style="color:red">affiche 10</em> !
+ Les variables ont une portée <em style="color:red">locale</em>
+ par défaut. Si <tt>$a</tt> n'est pas définie dans le corps de la
+ fonction, sa valeur est <tt style="color:red">NULL</tt>
+ (variable non définie). <span >Pour référencer
+ des variables globales, on utilise le mot clé <tt><em>global</em></tt>.</span>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Fonction : définition <b style="color:red">⚠</b></h1>
+ <p>On peut utiliser une fonction <s>« avant »</s> de la définir :</p>
+ <code> <?php
+ echo next(10);
+ echo <br/>;
+
+ function next($x)
+ {
+ return $x + 1;
+ }
+ ?></code>
+ <p>On définira <em>toujours</em> des fonctions <em>avant</em> de
+ les utiliser. On ne peut pas définir deux fonctions avec le même
+ nom.
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Fonctions : passage par référence</h1>
+ <p>On utiliser le modificateur <tt><em>&</em></tt> devant
+ un paramètre de fonction pour indiquer que ce dernier est passé
+ par référence.</p>
+ <div class="twocol">
+ <div>
+ <code><?php
+ function add_a($tab)
+ {
+ $tab["a"] = 42;
+ }
+
+ $mytab = array();
+ add_a($mytab);
+ echo $mytab["a"];
+ //<s>n'affiche rien (car NULL ⇝ "")</s>
+?></code>
+ </div>
+ <div>
+ <code><?php
+ function add_a(<em>&</em>$tab)
+ {
+ $tab["a"] = 42;
+ }
+
+ $mytab = array();
+ add_a($mytab);
+ echo $mytab["a"];
+ //<em>affiche 42</em>
+?></code>
+ </div>
+
+ </div>
+ <p>Lorsque l'on veut <em>modifier</em> un argument de la
+ fonction (plutot que de renvoyer une version modifiée, par
+ ex. mise à jour d'un tableau, d'une chaîne, …), on doit le
+ passer par référence.
+ </p>
+ </div>
+ <h1>Manipulation des chaînes et expressions régulières</h1>
+ <div class="sws-slide">
+ <h1>Quelques fonctions utilitaires sur les chaînes</h1>
+ <dl>
+ <dt><tt>explode($delim, $entree)</tt></dt>
+ <dd>Découpe la chaîne <tt>$entre
+e</tt> suivant la
+ sous-chaîne <tt>$delim</tt> et renvoie les morceaux dans un
+ tableau.</dd>
+ <dt><tt>implode($delim, $tab)</tt></dt>
+ <dd>Réunit les chaînes se trouvant dans le
+ tableau <tt>$tab</tt> en les séparant par la
+ chaîne <tt>$delim</tt>.
+ </dd>
+ <dt><tt>ltrim($entree)</tt></dt>
+ <dd>Retire les caractères blancs en début de chaîne.</dd>
+ <dt><tt>rtrim($entree)</tt></dt>
+ <dd>Retire les caractères blancs en fin de chaîne.</dd>
+ <dt><tt>trim($entree)</tt></dt>
+ <dd>Retire les caractères blancs en début et en fin de
+ chaîne.</dd>
+ <dt><tt>htmlspecialchars($entree)</tt></dt>
+ <dd>converti les caractères <tt>&</tt>, <tt>"</tt>,
+ <tt>'</tt>, <tt><</tt> et <tt>></tt> en
+ <tt>&amp;</tt>, <tt>&quot;</tt>,
+ <tt>&apos;</tt>, <tt>&lt;</tt> et <tt>&gt;</tt>.
+ </dd>
+
+ </dl>
+ </div>
+ <div class="sws-slide">
+ <h1>Expressions régulières : syntaxe</h1>
+ <p>Les expressions régulières de PHP sont au format PCRE (Perl
+ Common Regular Expressions) <tt><em>'/r/'</em></tt>
+ où <tt>r</tt> est une expression de la forme:</p>
+<code> <table style="margin:0em 2em">
+ <tr>
+ <td>r ::=</td> <td> <it>a</it> </td> <td> (un caractère)</td></tr>
+ <tr><td> |</td> <td> <em>.</em></td> <td> (n'importe quel caractère)</td></tr>
+ <tr><td> |</td><td> r<sub>1</sub> <em>|</em> r<sub>2</sub></td> <td> (r<sub>1</sub> ou r<sub>2</sub>)</td></tr>
+ <tr><td> |</td><td> r<em>?</em></td><td> (r répétée au plus 1 fois)</td></tr>
+ <tr><td> |</td><td> r<em>*</em></td><td> (r répétée 0 fois ou plus)</td></tr>
+ <tr><td> |</td><td> r<em>+</em></td><td> (r répétée 1 fois ou plus)</td></tr>
+ <tr><td> |</td><td> <em>[</em>c<sub>1</sub> … c<sub>n</sub><em>]</em></td> <td> (un caractère parmis c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
+ <tr><td> |</td><td> <em>[</em>c<sub>1</sub><em>-</em>c<sub>n</sub><em>]</em></td> <td> (un caractère parmis c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
+ <tr><td> |</td><td> <em>[^</em>c<sub>1</sub> … c<sub>n</sub><em>]</em></td> <td> (un caractère sauf c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
+ <tr><td> |</td><td> <em>[^</em>c<sub>1</sub><em>-</em>c<sub>n</sub><em>]</em></td> <td> (un caractère sauf c<sub>1</sub>, …, c<sub>n</sub>)</td></tr>
+ <tr><td> |</td> <td> <em>^</em></td> <td> (début de texte)</td></tr>
+ <tr><td> |</td> <td> <em>$</em></td> <td> (fin de texte)</td></tr>
+ <tr><td> |</td> <td> <em>(</em>r<em>)</em></td> <td> (r elle même)</td></tr>
+
+<!-- | <em>(</em>r<em>)</em> (r elle même)
+-->
+</table>
+</code>
+ </div>
+<div class="sws-slide">
+ <h1>Expressions régulières : recherche</h1>
+ <code style="text-align:center"> <em>preg_match</em>($regexp, $chaine)</code>
+ <p>renvoie <em>1</em> si une sous-chaine de <tt>$chaine</tt>
+ correspond à <tt>$regexp</tt>, <em>0</em> si aucune sous-chaine ne correspond
+ et <s><tt>FALSE</tt></s> en cas de problème (attention,
+ utiliser <tt>===</tt> pour tester le résultat).
+</p>
+<code style="margin: 0em 2em"><?php
+ $chaine = "ABCDEFABCDEF";
+ echo preg_match(<em>'/ABC/'</em>, $chaine); // affiche 1
+ echo preg_match(<em>'/DEF/'</em>, $chaine); // affiche 1
+ echo preg_match(<em>'/^ABC/'</em>, $chaine); // affiche 1
+ echo preg_match(<em>'/^DEF/'</em>, $chaine); // affiche 0
+ echo preg_match(<em>'/ABC$/'</em>, $chaine); // affiche 0
+ echo preg_match(<em>'/DEF$/'</em>, $chaine); // affiche 1
+ echo preg_match(<em>'/(ABC...)+/'</em>, $chaine); // affiche 1
+ echo preg_match(<em>'/[^A-Z]+/'</em>); // affiche 0
+ echo preg_match(<em>'/[^A-Z]*/'</em>); // affiche 1 !
+ echo preg_match(<em>'/^[^A-Z]*$/'</em>); // affiche 0
+?></code>
+</div>
+<div class="sws-slide">
+ <h1>Expressions régulières : substitution</h1>
+ <code style="text-align:center"> <em>preg_replace</em>($regexp, $motif, $chaine)</code>
+ <p>recherche toutes les sous-chaînes de <tt>$chaine</tt> reconnues
+ par <tt>$regexp</tt> et les remplace par <tt>$motif</tt>. Ce dernier
+ peut contenir <tt>$<em>i</em></tt> pour référencer
+ le <em>i<sup>ème</sup></em> groupe de parenthèses</p>
+ <code style="margin: 0em 2em;background:white;"><?php
+ $chaine = "<em>10</em>-<s>31</s>-<s style='color:blue'>1981</s>";
+ $reg1 = "/<em>(</em>[0-9]+<em>)</em>-<s>(</s>[0-9]+<s>)</s>-<s style='color:blue'>(</s>[0-9]+<s style='color:blue'>)</s>/";
+ echo preg_replace($reg1, "<em>$2</em>/<s>$1</s>/<s style='color:blue'>$3</s>", $chaine);
+ // affiche 31/10/1981
+
+ $reg2 = "/1/";
+ echo preg_replace($reg2, "toto", $chaine);
+ // affiche toto0-3toto-toto98toto
+
+ $reg3 = "/[0-9]([0-9]*)/"
+ echo preg_replace($reg3, "$1", $chaine);
+ // affiche 0-1-981 (* déplie la regexp le plus possible)
+?></code>
+</div>
+<div class="sws-slide">
+ <h1>Expressions régulières : séparation</h1>
+ <code style="text-align:center"> <em>preg_split</em>($regexp, $chaine)</code>
+ <p>renvoie un tableau des sous-chaine de <tt>$chaine</tt> séparées
+ par <tt>$motif</tt> (équivalent à <tt>explode</tt> pour
+ des <tt>$regexp</tt> constantes).</p>
+ <code style="margin: 0em 2em;background:white;"><?php
+ $chaine = "Une phrase, c'est plusieurs mots.";
+ print_r (preg_split("/[ ,.']+/", $chaine));
+ //Affiche:
+ //Array ( [0] => Une [1] => phrase [2] => c [3] => est
+ // [4] => plusieurs [5] => mots [6] => )
+?></code>
+</div>
+<div class="sws-slide">
+ <h1>Expressions régulières : recherche exhaustive</h1>
+
+ <code style="text-align:center"> <em>preg_match_all</em>($regexp, $chaine, &$resultat)</code>
+ <p><tt><em>&$resultat</em></tt> est un tableau <em>passé par
+ référence</em>. Après l'appel, <tt>$resultat[0]</tt> contient un
+ tableau avec <em>toutes</em> les sous-chaines reconnues
+ et <tt>$resultat[i]</tt> contient tous les résultats reconnus par le
+ i<sup>ème</sup> groupe de parenthèses. Renvoie le nombre de chaines
+ trouvées (<i>i.e.</i> la longueur de <tt>$resultat[0]</tt>).
+</p>
+ <code style="margin: 0em 2em;background:white;"><?php
+ $res = array();
+ $chaine = "ABC ACD AEF AB DEF";
+ echo preg_match_all("/A([A-Z]*)/", $chaine, $res);
+ //Affiche 4
+ print_r ($res);
+ /*Affiche
+ Array ( [0] =>
+ Array ( [0] => ABC [1] => ACD [2] => AEF [4] => AB)
+ [1] =>
+ Array ( [0] => BC [1] => CD [2] => EF [4] => B)
+ )
+*/?></code>
+</div>
+<h1>Manipulation de fichiers</h1>
+<div class="sws-slide">
+ <h1>Envoi d'un fichier au serveur (1/2)</h1>
+ <p>On utilise la méthode <tt><em>post</em></tt> pour les
+ formulaires. Les valeurs sont envoyées dans la requête HTTP (et non
+ pas encodées dans l'URL)</p>
+ <code>
+ <form action="cible.php" <em>method="post"</em>
+ <em>enctype="multipart/form-data"</em>>
+ <input <em>type="file" <s>name="fichier"</s></em> size="20"/>
+ <button type="sumbit">Uploader le fichier</button>
+ </form>
+</code>
+<p>Apperçu:</p><form style="margin: 0em 1em" action="" method="post"
+ enctype="multipart/form-data">
+ <input type="file" name="fichier" size="20"/>
+ <button type="submit">Uploader le fichier</button>
+</form>
+<p>Coté serveur, la variable <tt><em>$_FILES</em></tt> est
+ définie. <tt><em>$_FILES[<s>"fichier"</s>]</em></tt> contient un
+ tableau avec des informations sur le fichier envoyé. Les autres
+ champs (par exemple valeur d'un champ texte) sont stockés dans la
+ variable <tt>$_POST</tt> (au lieu de <tt>$_GET</tt>).
+</p>
+</div>
+<div class="sws-slide">
+ <h1>Envoi d'un fichier au serveur (2/2)</h1>
+ <p>Étant donné un formulaire avec un champ <i>input</i> de
+ type <i>file</i> et de nom <tt>"fichier"</tt> on a accès aux
+ information suivantes:</p>
+ <dl>
+ <dt><tt>$_FILES["fichier"]["error"]</tt></dt> <dd>Code d'erreur
+ (0 si tout c'est bien passé, <tt>></tt> 0 si une erreur s'est produite. Les
+ autres champs ne sont définis que si "error" vaut 0).
+ </dd>
+ <dt><tt>$_FILES["fichier"]["tmp_name"]</tt></dt><dd>Nom du fichier
+ temporaire sur le serveur où a été sauvegardé le contenu du
+ fichier envoyé</dd>
+ <dt><tt>$_FILES["fichier"]["name"]</tt></dt><dd>Nom original du fichier</dd>
+ <dt><tt>$_FILES["fichier"]["size"]</tt></dt><dd>Taille du
+ fichier</dd>
+ <dt><tt>$_FILES["fichier"]["type"]</tt></dt><dd>Le type MIME du fichier</dd>
+ </dl>
+</div>
+<div class="sws-slide">
+ <h1>Ouverture d'un fichier</h1>
+<code style="text-align:center"> <em>fopen</em>($nomfichier, $mode)</code>
+<p>Ouvre un fichier dont on donne le nom avec un <i>mode</i>
+ particulier. Les modes sont: <em><tt>"r"</tt></em>
+ (lecture), <em><tt>"r+"</tt></em> (lecture/écriture),
+ <em><tt>"w"</tt></em> (écriture),
+ <em><tt>"w+"</tt></em> (lecture/écriture, création si non-existant),
+ <em><tt>"a"</tt></em> (écriture, ajout à la fin si existant),
+ <em><tt>"a+"</tt></em> (lecture/écriture, création si non-existant,
+ ajout à la fin si existant). <em><tt>fopen</tt></em> renvoie un
+ descripteur de fichier que l'on peut utiliser pour manipuler le
+ fichier.
+</p>.
+</div>
+<div class="sws-slide">
+ <h1>Lecture/écriture/fermeture d'un fichier</h1>
+<code style="text-align:center"> <em>fread</em>($desc, $taille)</code>
+<p>Lit au maximum <em><tt>$taille</tt></em> caractères dans un fichier
+ dont le descripteur (renvoyé par <tt>fopen</tt>)
+ est <tt>$desc</tt>. La fonction renvoie un chaine d'au
+ plus <tt>$taille</tt> caractères ou <tt>FALSE</tt> en cas d'erreur.
+</p>
+<code style="text-align:center"> <em>fwrite</em>($desc, $chaine)</code>
+<p>Écrit la chaine de caractères à la position courante dans le
+ fichier dont le descripteur est <tt>$desc</tt>. Renvoi le nombre
+ d'octets écrits ou <tt>FALSE</tt> en cas d'erreur.
+</p>
+<code style="text-align:center"> <em>fclose</em>($desc)</code>
+<p>Ferme le fichier dont le descripteur est <tt>$desc</tt>
+</p>
+</div>
+<div class="sws-slide">
+ <h1>Déplacement dans un fichier</h1>
+ <code style="text-align:center"> <em>fseek</em>($desc, $offset, $orig)</code>
+ <p>Déplace le pointeur interne de position du fichier dont le
+ descripteur est <tt>$desc</tt> de <tt>$offset</tt> octets. Le
+ paramètre <tt>$orig</tt> donne l'origine: <tt>SEEK_CUR</tt>
+ (décalage à partir de la position courante), <tt>SEEK_SET</tt>
+ (position absolue dans le fichier), <tt>SEEK_END</tt> (décalage à
+ partir de la fin de fichier).
+</p>
+</div>
+<div class="sws-slide">
+<h1>Interface simplifiée</h1>
+<code style="text-align:center"> <em>file_get_contents</em>($nomfichier)</code>
+<p>Ouvre un fichier dont on donne le nom et renvoie son contenu sous
+ forme d'une chaine de caractères</p>
+<code style="text-align:center"> <em>file</em>($nomfichier)</code>
+<p>Renvoie un tableau avec une case par ligne dans le fichier. Chaque
+ entrée contient le "\n" terminal.</p>
+</div>
+ </body>
+
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>PHP : Sessions et persistance</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
+ <script src="../libs/raphael-min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a href="prog_internet_07.xhtml" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 8</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <h1>En-tête de requêtes HTTP</h1>
+
+ <div class="sws-slide">
+ <h1>Retour sur le protocole HTTP</h1>
+ <ul><li><em>Client : </em>
+<code>GET <em>/~kn/index.html</em> HTTP/1.1
+Host: www.lri.fr
+</code> </li>
+<li><em>Serveur : </em><br/>
+ <code style="display:inline-block;width:60%;vertical-align:top;">HTTP/1.1 200 OK
+Server: nginx/1.4.1 (Ubuntu)
+Date: Sun, 17 Nov 2013 16:44:48 GMT
+Content-Type: <em>text/html</em>
+Content-Length: 2038
+<![CDATA[
+<html>
+ <head><title>Homepage</title> </head>
+ <body>
+ …
+]]>
+ </code>
+<code style="display:inline-block;
+ black;width:30%;vertical-align:top;">} ← <em>code de retour</em>
+
+
+} ← <em>type de contenu</em>
+} ← <em>longueur du contenu</em>
+<span style="font-size:400%;vertical-align:middle;">}</span> <span>←</span> <em>contenu (2038 octets)</em>
+</code>
+</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Retour sur le protocole HTTP (2)</h1>
+ <ul><li><em>Client : </em>
+<code>GET <em>/~kn/fichier.pdf</em> HTTP/1.1
+Host: www.lri.fr
+</code> </li>
+<li><em>Serveur : </em><br/>
+ <code >HTTP/1.1 200 OK
+Server: nginx/1.4.1 (Ubuntu)
+Date: Sun, 17 Nov 2013 16:44:48 GMT
+Content-Type: <em>application/pdf</em>
+Content-Length: 103449
+<![CDATA[
+%PDF-1.2
+%
+8 0 obj
+<</Length 9 0 R/Filter /FlateDecode>>
+stream
+………
+ ]]>
+ </code>
+
+</li>
+ </ul>
+ </div>
+<div class="sws-slide">
+<h1>Modifier le <em>content-type</em> en PHP</h1>
+<p>Fichier <tt>notes_csv.php</tt>:</p>
+<code> <?php<em>
+ header('Content-type: application/csv');
+ header('Content-Disposition: attachement; filename="notes.csv"');</em>
+ echo "Nom, Note\n";
+ foreach ($NOTES as $nom => $note)
+ echo $nom . ", " . $note . "\n";
+
+ ?></code>
+<p class="sws-pause"><b style="color:red">⚠ Attention!</b></p>
+<ul>
+ <li>Les appels à la fonction <em><tt>header()</tt></em> doivent se
+ trouver <s>avant</s> le premier <tt>echo()</tt> du code PHP</li>
+ <li>
+ Le code PHP doit générer (avec <tt>echo()</tt>) du contenu
+ compatible avec le type annoncé (et pas du HTML)
+ </li>
+</ul>
+</div>
+
+<div class="sws-slide">
+<h1>Quelques en-tête utiles</h1>
+<p>En tête utilisés par le serveur dans ses réponses</p>
+<dl>
+ <dt><tt>Content-type</tt></dt><dd>type MIME du contenu envoyé par le
+ serveur</dd>
+ <dt><tt>Content-Disposition</tt></dt><dd>permet de mentionner un nom de
+ fichier : <em><tt>attachment; filname="foobar.baz"</tt></em></dd>
+ <dt><tt>Cache-Control</tt></dt><dd>permet de forcer le client à
+ retélécharger la page: <em><tt>no-cache, must-revalidate</tt></em>
+ </dd>
+ <dt><tt>Last-Modified</tt></dt><dd>date de dernière modification du
+ contenu demandé</dd>
+</dl>
+<p>En tête utilisés par le client dans ses requêtes</p>
+<dl>
+ <dt><tt>Range</tt></dt><dd>permet de ne récupérer qu'un intervale
+ d'octets donné dans un fichier: <em><tt>bytes=500-999</tt></em>
+ </dd>
+ …
+</dl>
+
+</div>
+<div class="sws-slide">
+ <h1>Retour sur le protocole HTTP (3)</h1>
+ <p>On rappelle que HTTP est un protocole <em><i>stateless</i></em>
+ (sans état, <i>i.e.</i> le serveur Web ne conserve pas d'information
+ entre les connexions). Quel problème cela pose-t-il ?</p>
+ <ul >
+ <li class="sws-pause">Pas de partage d'information entre plusieur
+ pages</li>
+ <li class="sws-pause">Pas de mécanisme de reprise sur panne
+ </li>
+ <li class="sws-pause">Pas de persistance de l'information</li>
+ <li class="sws-pause">Pas d'authentification (impossible de savoir
+ que deux connexions successives ont été faites par le même
+ client)</li>
+ </ul>
+ <p class="sws-pause">⇒ difficle de réaliser une « application »
+ moderne répartie sur plusieurs pages</p>
+</div>
+
+<h1>Cookies</h1>
+<div class="sws-slide">
+<h1>Cookies</h1>
+<p>Un <em><i>cookie</i></em> est un packet de données envoyé par le
+ serveur, stocké par le client (navigateur Web) et renvoyé au serveur
+ lors d'une nouvelle connexion. Les propriétés d'un cookie sont:
+</p>
+<dl>
+ <dt>Son nom</dt><dd>une chaîne de caractères</dd>
+ <dt>Sa valeur</dt><dd>une chaîne de caraceres</dd>
+ <dt>Sa durée de vie</dt><dd>jusqu'à la fin de la « session » ou pour
+ une période donnée</dd>
+ <dt>Son domaine</dt><dd>Le nom du site web émetteur du cookie</dd>
+ <dt>Son chemin</dt><dd>Le sous-répertoire (par rapport à la racine
+ du site) pour lequel le cookie est valide</dd>
+</dl>
+<p><b style="color:red">⚠ Attention!</b> seul le domaine qui a
+ déposé le cookie est capable de le relire</p>
+</div>
+<div class="sws-slide">
+<h1>Cookies en PHP</h1>
+<p>Créer ou mettre à jour un cookie sur le client:</p>
+<code style="text-justify:center">
+ setcookie(<em>$nom</em>, <em>$val</em>, <em>$date</em>);
+</code>
+<dl>
+ <dt><tt>$nom</tt></dt><dd>nom du cookie</dd>
+ <dt><tt>$val</tt></dt><dd>valeur du cookie</dd>
+ <dt><tt>$date</tt></dt><dd>date d'expiration en secondes
+ depuis <i>epoch</i> (1<sup>er</sup> janvier 1970 00:00:00)
+ ou <tt>NULL</tt> pour une expiration automatique.</dd>
+</dl>
+<p>(on peut récupérer le nombre de secondes depuis <i>epoche</i> avec
+ la fonction <tt>time()</tt>).<br/>
+ Exemple:
+</p>
+<code> setcookie("mon_cookie", "42", time() + 3600 * 24 * 30);</code>
+</div>
+
+<div class="sws-slide">
+ <h1>Cookies en PHP</h1>
+ <p>On peut récupérer la valeur d'un cookie depuis PHP:
+ </p>
+ <code> <em>$_COOKIE["mon_cookie"]</em></code>
+ <p>Un cookie <tt>"foo"</tt> existe (<i>i.e.</i> a été défini
+ auparavant) si une entrée correspondante existe dans le tableau
+ global <em><tt>$_COOKIE</tt></em>. On peut tester qu'une entrée
+ existe dans un tableau avec <em><tt>isset()</tt></em>.
+ </p>
+ <p><b style="color:red">⚠ Attention!</b> </p>
+ <ul>
+ <li>On ne peut pas écrire dans <em>$_COOKIE</em> (par
+ exemple <tt>$_COOKIE["foo"] = 42</tt>), il faut
+ utiliser <em><tt>setcookie()</tt></em>.
+ </li>
+ <li><em><tt>setcookie()</tt></em>
+ utilise <em><tt>header()</tt></em> et doit donc être appelé avant
+ le premier <em><tt>echo()</tt></em> du fichier.
+ </li>
+ <li>Pour effacer un cookie, on peut lui donner une date
+ d'expiration antérieure à l'instant présent (<tt>0</tt> par exemple)</li>
+ </ul>
+</div>
+
+<div class="sws-slide">
+ <h1>Avantages et inconvénients des cookies</h1>
+<ul style="list-style-type:none;">
+ <li class="sws-pause"><b>+</b> stockage persistant</li>
+ <li class="sws-pause"><b>+</b> interface simple d'utilisation (une
+ variable pour la lecture et <tt>setcookie</tt> pour l'écriture)</li>
+ <li class="sws-pause"><b>-</b> limité en taille </li>
+ <li class="sws-pause"><b>-</b> limité en nombre par domaine</li>
+ <li class="sws-pause"><b>-</b> type de donnée limité à des chaînes
+ (on ne peut pas stocker un tableau PHP par exemple)</li>
+<li class="sws-pause"><b>+/-</b> stocké sur le client</li>
+</ul>
+</div>
+<h1>Sessions</h1>
+<div class="sws-slide">
+<h1>Sessions</h1>
+ <p>Une <em>session HTTP</em> est un ensemble de requêtes/réponses HTTP
+ entre un serveur et un <em>même</em> client.<br/>
+ Exemple d'un sondage en ligne:
+ </p>
+ <ol> <li>Le visiteur arrive sur la page <tt>q1.php</tt> en cliquant sur
+ le lien « commencer le sondage » (<em>Début de session</em>)
+ </li>
+ <li> Sur <tt>q1.php</tt>, l'utilisateur coche des choix dans un formulaire et appuie
+ sur un boutton de soumission qui l'envoie sur <tt>q2.php</tt>
+ </li>
+ <li>…</li>
+ <li> Sur <tt>q10.php</tt>, l'utilisateur coche des choix dans un
+ formulaire et appuie sur un bouton de soumission qui l'envoie
+ sur <tt>resultat.php</tt></li>
+ <li> Sur <tt>resultat.php</tt>, le résultat global du sondage (%
+ par question, nombre de participants jusqu'à présent etc...) est
+ affiché (<em>Fin de session</em>)
+ </li>
+ </ol>
+
+</div>
+<div class="sws-slide">
+ <h1>Variables de session</h1>
+ <p>Pour programmer une application Web, on souhaîte avoir accès à
+ des <em>variables de session</em> c'est à dire des variables qui
+ sont:
+ </p>
+ <ul><li>Globale au serveur, et accessibles depuis plusieurs pages
+ PHP différentes</li>
+ <li>Spécifiques à un « utilisateur » (c'est à dire à une session
+ particulière)
+ </li>
+ </ul>
+ <p>Les variables de sessions sont donc propres à chaque client et
+ persistent le temp de la session (le temps de session est décidé par
+ le serveur)</p>
+</div>
+<div class="sws-slide">
+ <h1>Variables de session en PHP</h1>
+ <p>On initie une session avec la fonction:</p>
+ <code> <em>session_start();</em> </code>
+ <p>Une fois appelée, la variable <em><tt>$_SESSION</tt></em>
+ contient un tableau que l'on peut utiliser entre plusieurs
+ pages. Les valeurs contenues dans le tableau persistent jusqu'à la
+ fin de la session. Une session se termine:
+ </p>
+ <ul><li>Quand le client se déconnecte</li>
+ <li>Après un certain temps (« votre session a expiré, veuillez
+ vous reconnecter»)</li>
+ <li>Quand le code PHP
+ appelle <em><tt>session_end();</tt></em></li>
+ </ul>
+<p><b style="color:red">⚠
+ Attention!</b> <em><tt>session_start()</tt></em> doit être appelé
+ avant le premier <tt>echo</tt> du fichier.</p>
+</div>
+<div class="sws-slide">
+ <h1>Variables de session en PHP (2)</h1>
+<code style="border: 2pt dashed gray;margin:5pt;">
+ <?php /* Fichier page1.php */
+ <em>session_start();
+ $_SESSION["Valeur"] = 42;</em>
+ ?>
+ <![CDATA[<html>
+ <body>
+ Veuillez cliquer sur le <a href=]]><em>"page2.php"</em><![CDATA[>lien</a>
+ </body>
+ </html>
+]]></code>
+<code style="border: 2pt dashed gray;margin:5pt;"> <![CDATA[<html>
+ <body>
+ La valeur est <?php]]> <em>echo $_SESSION["Valeur"];</em> <![CDATA[?>
+ <!-- affiche 42 -->
+ </body>
+ </html>
+]]></code>
+</div>
+<div class="sws-slide">
+ <h1>Avantages et inconvénients des session</h1>
+<ul style="list-style-type:none;">
+ <li class="sws-pause"><b>+</b> Informations stockées sur le serveur</li>
+ <li class="sws-pause"><b>+</b> Pas de limite de taille</li>
+ <li class="sws-pause"><b>+</b> Pas limité à des chaînes de caractères</li>
+ <li class="sws-pause"><b>-</b> Valeurs perdues en fin de session</li>
+ <li class="sws-pause"><b>-</b> <s>Nécessite des cookies</s></li>
+</ul>
+</div>
+<div class="sws-slide">
+ <h1>Sessions PHP: détails d'implantation</h1>
+ <div class="twocol">
+ <div><em>Coté client</em><br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+Connexion à une page PHP (envoie du cookie ("php_ssid", "12345"))
+
+
+ </div>
+ <div><em>Coté serveur (PHP)</em><br/>
+ <tt>session_start();</tt><br/>
+ - génération d'un ID unique "12345"<br/>
+ - dépot d'un cookie "php_ssid", valeur "12345", durée 10 minutes
+ - création dans un tableau global d'une entrée:<br/>
+ <tt>$_GLOBAL["12345"] = Array();</tt><br/>
+ <br/>
+ <tt>$_SESSION = $_GLOBAL[$_COOKIE["php_ssid"]]</tt>
+ </div>
+ </div>
+</div>
+
+<div class="sws-slide">
+ <h1>Dans la vraie Vie<sup>TM</sup></h1>
+ <p>Mélange de variables de sessions, cookies et bases de données.<br/>
+ Scénario réaliste: site de commerce en ligne
+ </p>
+ <ul>
+ <li>Login/mot de passe stocké dans
+ une <em style="color:blue;">BD</em> </li>
+ <li>Panier courant stocké dans une <em>variable de
+ session</em></li>
+ <li>Login, date de dernière visite, dernière page visitée stockés
+ dans un <em style="color:orange">en cookie</em></li>
+ </ul>
+ <p class="sws-pause">Pourquoi ?</p>
+ <ul>
+ <li><em style="color:blue;">BD</em>: information persistante,
+ côté serveur (mais la mise à jour, récupération de l'info est
+ coûteuse (en temps))
+ </li>
+ <li><em>Variables de sessions</em> : le panier n'a pas forcément
+ besoin d'être conservé entre deux sessions, mais on ne veut pas
+ que le client puisse fabriquer un panier frauduleux
+ </li>
+ <li><em style="color:orange">Cookie</em> : persistante à faible
+ coût (stocké sur le client), ce n'est pas grave si les
+ informations sont perdues ou corrompues
+ </li>
+ </ul>
+
+ </div>
+ </body>
+
+</html>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Notions de sécurité sur le Web</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
+ <script src="../libs/raphael-min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+ <a href="prog_internet_08.xhtml" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 9</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+ <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+ </div>
+
+ <h1>Faiblesses d'HTTP</h1>
+
+ <div class="sws-slide">
+ <h1><i>Disclaimer</i></h1>
+ <ul>
+ <li>Aborde juste quelques aspects de sécurité</li>
+ <li>Essaye de montrer quelques principes fondamentaux</li>
+ <li>Uniquement axé sur le Web</li>
+ </ul>
+ <p><b>⇒</b> Ça ne va pas faire de vous des <i>hackers</i>,
+ juste vous sensibiliser aux problèmes de sécurité…
+ </p>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Élements de cryptographie (1)</h1>
+ <p>Alice et Bob veulent échanger des données
+ confidentielles.</p>
+ <ol style="list-style-type:none;">
+ <li>1. Chiffrement <s>symétrique</s>:
+ <ul>
+ <li>
+ Ils se mettent d'accord sur une <em>clé commune</em>
+ </li>
+ <li> Alice <em>chiffre</em> son message avec la clé et
+ l'envoie à Bob</li>
+ <li> Bob déchiffre le message avec <em>la clé</em>
+ </li>
+ </ul>
+ <p class="sws-pause">
+ <s>Non sûr</s> (Alice et Bob doivent se mettre d'accord sur une clé en
+ « clair », par email par exemple) ou <s>non pratique</s>
+ (ils doivent se rencontrer physiquement pour échanger la
+ clé).<br/>
+ <em>Efficace</em>: on peut implanter plusieurs algorithmes
+ de chiffrements en utilisant uniquement des opérations
+ logiques de bases
+ (<tt>AND</tt>, <tt>OR</tt>, <tt>XOR</tt>). Il est facile de
+ les implanter sur des puces dédiées (cartes de crédit,
+ processeurs mobiles). Ils sont « sûrs » tant que la clé
+ reste secrète.
+ </p>
+ </li>
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Élements de cryptographie (2)</h1>
+ <p>Alice et Bob veulent échanger des données
+ confidentielles.</p>
+ <ol style="list-style-type:none;">
+ <li>2. Chiffrement <em>assymétrique</em>:
+ <ul>
+ <li>Bob crée une <em>clé
+ publique</em> <i>K<sup>B</sup><sub>pub</sub></i>
+ et une <em style="color:orange;">clé
+ secrète</em> <i>K<sup>B</sup><sub>priv</sub></i>, telle
+ que<div style="text-align:center">
+ ∀<i>msg</i>, <i>K<sup>B</sup><sub>priv</sub></i>(<i>K<sup>B</sup><sub>pub</sub></i>(<i>msg</i>))
+ = <i>K<sup>B</sup><sub>pub</sub></i>(<i>K<sup>B</sup><sub>priv</sub></i>(<i>msg</i>))
+ = <i>msg</i>
+ </div>
+ Bob <em>diffuse</em> sa clé publique (sur sa page Web
+ par exemple, ou dans un annuaire de clé) et garde sa clé
+ privée <em style="color:orange;">secrète</em>.
+ </li>
+ <li> Alice <em>chiffre</em> son message <i><s>m</s></i> avec la <em>clé
+ publique</em> de Bob
+ (<i>K<sup>B</sup><sub>pub</sub></i>(<i>m</i>)) et l'envoie à Bob
+ </li>
+ <li> Bob
+ déchiffre le message avec sa clé
+ privée: <i>K<sup>B</sup><sub>priv</sub>(K<sup>B</sup><sub>pub</sub></i>(<i>m</i>))=<s><i>m</i></s>
+ </li>
+ </ul>
+ <p class="sws-pause">
+ <s>Sûr et pratique</s> (Bob a généré une paire de clé, et a
+ déposé la clé publique sur une page Web)<br/>
+ <em>Peu efficace</em>: repose sur des problèmes
+ mathématiques difficiles (factorisation de grands entiers,
+ courbes eliptiques sur les corps finis). Chiffrer et
+ déchiffrer un message n'est pas réaliste pour des grands
+ messages (vidéo en streaming, requêtes Web, …).
+ </p>
+ </li>
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Élements de cryptographie (3)</h1>
+ <p>On combine les deux méthodes. (Alice envoie un message à Bob)</p>
+ <ul>
+ <li>Alice choisit une <s>clé symétrique secrète <i>s</i></s></li>
+ <li>Elle l'envoie à Bob en utilisant la clé publique de ce
+ dernier (<i>K<sup>B</sup><sub>pub</sub></i>(<i>s</i>))
+ </li>
+ <li>Bob décrypte le message et
+ obtient <s><i>s</i></s>=<i>K<sup>B</sup><sub>priv</sub>(K<sup>B</sup><sub>pub</sub></i>(<i>s</i>))
+ </li>
+ <li>Bob et Alice se sont mis d'accord <em>de manière sûre</em>
+ sur une clé commune <s>s</s>! Ils peuvent utiliser un
+ algorithme de chiffrement symétrique pour le reste de la
+ conversation
+ </li>
+ </ul>
+ <p><b>⇒</b> Ceci est à la base de protocoles tels que HTTPS</p>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Éléments de cryptographie (4)</h1>
+ <p>Le chiffrement assymétrique permet aussi d'avoir <em>la
+ preuve</em> que quelqu'un est bien Bob!</p>
+ <ul>
+ <li>Alice choisit un message secret aléatoire <i><s>m</s></i>,
+ sans le divulguer (appelé <i>challenge</i>)
+ </li>
+ <li>Alice
+ calcule <i>K<sup>B</sup><sub>pub</sub>(<i>s</i>)</i> et
+ l'envoie à la personne qui prétend être Bob
+ </li>
+ <li>Seule la personne qui possède la clé privée de Bob (donc
+ Bob …) peut déchiffrer le message et renvoyer l'original à
+ Alice.
+ </li>
+ </ul>
+ <p> <b>⇒</b> Comment garantir que la personne qui a généré
+ les clés <s>au départ</s> est bien Bob ?
+ </p>
+ </div>
+
+ <div class="sws-slide">
+ <h1>HTTP: protocole texte « en clair »</h1>
+ <p>HTTP est un protocole <em>texte</em>, les données ne sont
+ pas chiffrées (cf. TP3) et <em>sans identification</em></p>
+ <ul>
+ <li><em>Confidentialité</em> : n'importe qui (avec les
+ privilèges nécessaires) peut lire ce qui transite entre un client
+ et un serveur Web</li>
+ <li><em>Authenticité</em> : n'importe qui peut se faire passer
+ pour un serveur Web (attaque <i>man in the middle</i>)
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Espionnage de connexion</h1>
+ <p>Alice représente le client, Bob le serveur et Eve (<i>Eavesdropper</i>)
+ l'attaquante</p>
+ <p>On suppose que <s>Eve</s> est <s>root</s> sur la
+ machine. Il suffit de lire les paquets qui transitent par la
+ carte réseau (<tt>tcpdump</tt> sous Linux).
+ </p>
+ <ul><li>Eve et Alice sont sur la même machine (démo):
+ <div style="text-align:center;vertical-align:middle;"><br/>
+ <span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">A
+ <s>E</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
+ 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">B</span>
+
+ </div>
+ </li>
+ <li>Fonctionne aussi si Eve est sur une machine se trouvant
+ sur la route entre Alice et Bob:
+ <div style="text-align:center;vertical-align:middle;"><br/>
+ <span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">A</span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
+ 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;"><s>E</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
+ 0 0 0;border-style:solid; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">B</span>
+
+ </div>
+ </li>
+ </ul>
+ <p>Ce problème touche tous les protocoles en clair: HTTP, POP,
+ IMAP, FTP, …. Il peut être résolu grace au <em>chiffrement</em>
+ de toute la connexion.</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Attaque <i>Man in the middle</i></h1>
+ <p><s>Mallory</s> se place entre Alice (cliente) et Bob (banque), par exemple au
+ moyen d'un <em>e-mail</em> frauduleux en HTML:</p>
+ <ol> <li> L'émail contient:
+ <code><![CDATA[ <html>
+ <body>
+ Bonjour,
+ veuillez vous connecter à votre banque en cliquant ici:
+ <a href=']]><s>mallory.com</s>' ><em>www.bob.com</em><![CDATA[</a>
+ </body>
+</html>]]></code>
+ </li>
+ <li>Alice, insouciante, clique sur le lien
+ <div style="text-align:center;vertical-align:middle;"><br/>
+ <span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">A</span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
+ 0 0 0;border-style:dashed; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;"><s>M</s></span><span style="display:inline-block;height:1ex;width:5em;border-width:1pt
+ 0 0 0;border-style:dashed; border-color:gray"> </span><span style="border:1pt solid gray;border-radius:
+ 5pt;padding:5pt;font-size:larger;">B</span>
+ </div>
+ </li>
+ <li>Mallory peut retransmettre les requêtes entre Bob et
+ Alice, en les modifiant au passage. Le problème est causé
+ par un manque d'authentification (Mallory n'a pas a
+ prouver à Alice qu'il est Bob)
+ </li>
+</ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Solution: HTTPS</h1>
+ <p>HTTP <em>Secure</em></p>
+ <ol> <li>Respose sur de la cryptographie assymétrique (pour
+ l'authentification et le partage de clé) et symétrique (pour le
+ chiffrement de connexion)</li>
+ <li>Permet d'authentifier les correspondants et de protéger
+ les données
+ </li>
+ <li>Suppose l'existence de <em>tiers de confiance</em> Alice
+ et Bob font confiance à Trent (<i>Trusted Third
+ Party</i>)</li>
+ </ol>
+ <p>Bob possède des clés publiques et privées
+ (<i>K<sup>B</sup><sub>pub</sub></i>
+ et <i>K<sup>B</sup><sub>priv</sub></i>), Trent possède des clés
+ publiques et privées (<i>K<sup>T</sup><sub>pub</sub></i>
+ et <i>K<sup>T</sup><sub>priv</sub></i>)
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>HTTPS (détail du protocole)</h1>
+ <p>Bob et Trent <em>se rencontrent</em>. Trent <em>signe</em>
+ la clé publique de Bob en calculant
+ <div style="text-align:center">
+ <i>S<sup>B</sup></i>=<i>K<sup>T</sup><sub>priv</sub></i>(<i>K<sup>B</sup><sub>pub</sub></i>)
+ </div>
+ Comme Trent utilise sa clé <em>privée</em> on sait que seul
+ Trent a pu générer cette signature. De plus, Trent
+ a <em>rencontré</em> Bob donc il <em>certifie</em> que la
+ clé <i>K<sup>B</sup><sub>pub</sub></i> appartient bien à
+ quelqu'un nommé Bob.
+ </p>
+ <ol>
+ <li>Alice (client) veut se connecter à Bob. Bob fournit sa
+ clé publique <i>K<sup>B</sup><sub>pub</sub></i> et la
+ signature <i>S<sup>B</sup></i></li>
+ <li> Alice contacte Trent (en qui elle a confiance) et récupère sa clé
+ publique <i>K<sup>T</sup><sub>pub</sub></i>. Elle déchiffre la
+ signature: <i>K<sup>T</sup><sub>pub</sub></i>(<i>S<sup>B</sup></i>)
+ et vérifie qu'elle retombe bien sur la clé publique de Bob.
+ </li>
+ <li>Elle peut alors choisir une clé symétrique, la chiffrer
+ avec <i>K<sup>B</sup><sub>pub</sub></i> et entammer une
+ communication <em>chiffrée</em> et <em>authentifiée</em> avec
+ Bob.</li>
+ </ol>
+</div>
+ <div class="sws-slide">
+ <h1>Tiers de confiance</h1>
+ <p>Les tiers de confiance sont des entités (états, associations,
+ compagnies privées) qui se chargent de vérifier les clés
+ publiques d'autres entitées. C'est une
+ vérification <em>physique</em> (documents administratifs, …).
+ </p>
+ <div style="text-align:center"><img style="width:70%" src="ssl-cert.png" alt="ssl"/>
+ </div>
+ <p style="background:white">Cette erreur s'affiche quand une signature n'est pas conforme
+ ou n'a pas pu être vérifiée</p>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Tiers de confiance</h1>
+ <p>Attaques contre les <em>authorités de certifications</em>
+ (tiers de confiance): difficiles, mais pas impossible. Certains
+ tiers de confiance sont douteux (états voyous, compagnie
+ piratées dont les clées <s>privées</s> sont compromises,…)<br/>
+ <s>Attaques d'implémentation</s> (plus probables) : on
+ exploite un <s>bug</s> dans le code des serveurs web ou des
+ navigateurs<br/>
+ <s>Autres faiblesses</s>: HTTPS est en « haut » dans la pile
+ IP (application). On peut donc avoir connaissance du nombre de
+ paquet échangés, des adresses IP des participants, la taille
+ et la fréquence des paquets… (même si on n'en connait pas le
+ contenu). Cela permet certaines attaques statisties ou de deni
+ de service.
+ </p>
+ </div>
+ <h1>Confidentialité, traîtement des <i>cookies</i></h1>
+ <div class="sws-slide">
+ <h1>Traçage par cookies</h1>
+ <p><i>Normalement</i>, un <em>cookie</em> ne peut être
+ lu <em>que</em> que par le site émetteur (cf. cours 8). But:</p>
+ <ol class="sws-pause">
+ <li>Empêcher un tiers de lire des données personnelles
+ (<em>ok</em>)</li>
+ <li>Empêcher un tiers de savoir quels sites ont été visités
+ (<em>pas ok</em>)</li>
+ </ol>
+ <ol>
+ <li class="sws-pause">Un site B utilise des publicités pour se rémunérer. Le
+ site marchand <s>M</s> fournit du code HTML:
+ <code> <script src="http://marchand.com/pub.js"/> </code>
+ </li>
+ <li class="sws-pause">A visite le site B. Le
+ code <tt>pub.js</tt> peut alors faire les choses suivantes:
+ <ol>
+ <li>Scanner le contenu de la page de B. Possible car le
+ script est « inclus » dans une page fournie par B</li>
+ <li>Se connecter
+ à<s><tt>http://marchand.com/collecte.php</tt></s> et
+ passer en paramètre <tt>post</tt> ou <tt>get</tt> le
+ contenu de la récolte</li>
+ <li><tt>http://marchand.com</tt> peut alors stocker un
+ cookie valide <em>pour son domaine</em> avec le contenu de
+ la récolte d'information
+ </li>
+ </ol>
+ </li>
+ <li class="sws-pause">
+ Lorsque A visite le site marchand <s>M</s>, ce dernier
+ relit son cookie et fait des propositions ciblées.
+ </li>
+
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Solutions</h1>
+ <ul>
+ <li>Désactiver les cookies de « tierce partie » (cookie dont
+ l'origine n'est pas celle de la page visitée)
+ </li>
+ <li> Effacer par défaut tous les cookies quand on quite le
+ navigateur</li>
+ <li>Rajouter des exceptions pour certains sites au cas par cas
+ </li>
+ </ul>
+ <p>Nouveau standard du W3C en préparation pour signifier à un
+ site qu'on ne souhaite pas être suivi (méthode « volontariste
+ » qui suppose que les sites commerciaux sont gentils et
+ respectent le protocole)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Sécurité des cookies de session</h1>
+ <p>On a vu que les sessions PHP (vrai aussi pour les autres
+ langages côté serveur) stockent dans un cookie un identifiant
+ unique. Que se passe-t-il si on vole ce cookie ? (démo)
+ </p>
+ <p class="sws-pause">Pas d'autre solution que de faire confiance
+ au <s>root</s> (solutions partielles basées sur le chiffrement
+ des disques dur)
+ </p>
+ </div>
+ <h1>Attaques par injection de code</h1>
+ <div class="sws-slide">
+ <h1>Injection de code Javascript/HTML</h1>
+ <p>Vulnérabilité: on exploite le fait qu'un site <s>utilise
+ directement</s> les entrées fournies par l'utilisateur.<br/>
+ Exemple: commentaires sur un blog.
+ </p>
+ <ol>
+ <li>Une page Web utilise un formulaire pour permettre de
+ poster des commentaires sur un blog:
+ <code><![CDATA[
+ <form action="comment.php" method="post">
+ Commentaire: <br/>
+ ]]><em><textarea rows="20" cols="60" name="zonetexte"/></em><![CDATA[
+ <br/>
+ <button type="submit">Envoyer</button>
+</form>]]></code>
+ </li>
+ <li>Un bout de code PHP écrit le commentaire sur la page:
+ <code> echo "Commentaire #$i: <p>";
+ <s>echo $_POST["zonetexte"];</s>
+ echo "</p>";
+</code>
+</li>
+
+
+ </ol>
+ </div>
+ <div class="sws-slide">
+ <h1>Injection de code Javascript/HTML</h1>
+ <s>Problème</s> tout ce qui est dans la zone de texte est copié
+ dans la page HTML de chaque client qui consulte la page
+ et <s>interprété</s> par son navigateur:
+ <code>Debut du commentaire
+ <s><script type="text/javascript"></s>
+ ... //code javascript malicieux
+ <s></script></s>
+ Fin du commentaire
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Injection de code PHP</h1>
+ <p><s>Problème</s> lié à l'utilisation de la fonction
+ <code> <s>eval</s>(command)</code>
+ <tt><em>command</em></tt> est une chaîne de caractères
+ considérée comme étant du code PHP et <tt>eval</tt> exécute
+ cette chaîne:
+ </p>
+ <code>
+ echo eval ("1 + 2 * 3"); // affiche 7
+ echo eval ('$x = 4;'); // définit la variable $x
+ echo $x; // affiche 4
+ </code>
+ <p>Il ne faut <s>jamais donner une chaine de caractère de
+ l'utilisateur comme argument à <tt>eval</tt></s> (sauf durant le
+ TP 9)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Solutions</h1>
+ <ul>
+ <li>Ne jamais <s>utiliser <tt>eval</tt></s></li>
+ <li>Utiliser la fonction <tt>htmlspecialchars</tt> qui
+ échappe les
+ caractères <tt><</tt>, <tt>></tt>, <tt>&</tt>, <tt>'</tt>, <tt>"</tt></li>
+ <li>Utiliser la fonction <tt>striptags</tt> qui supprime tout
+ ce qui est une balise</li>
+ <li>Toujours valider les entrées d'un utilisateur</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Injection de code SQL</h1>
+ <p>SQL: language de requête permettant d'interroger des bases de
+ données. Utilisation classique depuis PHP (on suppose un
+ formulaire qui met dans le champ <tt>"nom"</tt> le nom d'un
+ étudiant):
+ </p>
+ <code>
+ $Q = <em>"SELECT * FROM STUDENTS WHERE "</em>;
+ $Q = $Q . <em>"(NAME = '"</em> . $_POST["nom"] . <em>"');"</em>;
+ mysql_query($Q);
+ </code>
+ <p>Si l'utilisateur donne comme nom « Toto », la requête envoyée
+ à la base est: </p>
+ <code> SELECT * FROM STUDENTS WHERE (NAME = 'Toto');</code>
+ <p>Affiche toutes les lignes de la table <tt>STUDENTS</tt> pour
+ lesquel le nom est <tt>Toto</tt></p>
+ </div>
+ <div class="sws-slide">
+ <h1>Jusqu'au jour où …</h1>
+ <p>©xkcd<br/>
+ <img style="width:90%" src="xkcd.png" alt=""/>
+ </p>
+ <code> <em>SELECT * FROM STUDENTS WHERE (NAME ='</em><s>Robert');</s>
+ <s>DROP TABLE STUDENTS; --</s><em>');'</em>
+
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Ou bien…</h1>
+ <div style="text-align:center;">
+ <img style="width:70%" src="radar.jpg" />
+ </div>
+ </div>
+ </body>
+</html>
projects / hacks / simpleWebSlides.git / commitdiff
