background: white;
padding: 0 0 0 0;
margin: 0 0 0 0;
- /* allows the canvas to cover the logo needed */
z-index:2;
}
+.sws-inner-canvas { /* allows the canvas to cover the logo if needed */
+ z-index:2 }
-.sws-canvas:after {
+.sws-footer::before {
position:absolute;
bottom: 1vh;
left:1vh;
background-size: 100%;
background-image: url("logo_psud_psay.png");
background-repeat: no-repeat;
- z-index: -1;
}
+:root.sws-display .sws-footer::before { z-index: -1; }
+/*:root.sws-print .sws-footer::before { z-index: 1; }*/
.sws-slide-num-sep:after {
content: "/";
list-style-type: square;
}
-ul,il {
+ul, ol {
list-style-position: inside;
width: 92%;
padding: 0 4% 0 4%;
+++ /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;
-
- $(window).load(SWS.Presentation.init);
- </script>
-
- </head>
- <body>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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 ordinateurs 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="unix_prog_web_01.xhtml" class="sws-previous" />
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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>
-<h1> Gestion des processus</h1>
-
- <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 « <tt> counter.c </tt> »
- (<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> « <tt>counter.exe</tt> » 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 <tt style="color:red">count</tt></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> <tt style="color:green;">display</tt></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 « <tt>man ps</tt> » 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 « <tt>kill [-signal] pid</tt> »<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 (<tt><em>stdin</em></tt>), reliée
- au clavier</li>
- <li> La sortie standard (<tt><em>stdout</em></tt>), reliée
- à l'affichage</li>
- <li> La sortie d'erreur (<tt><em>stderr</em></tt>), reliée
- à l'affichage</li>
- </ol>
- <p>Dans le <i>shell</i>, on peut utiliser les
- opérateurs <tt><em><</em></tt>, <tt><em>></em></tt>
- et <tt><em>2></em></tt> pour récupérer le contenu
- de <tt><em>stdin</em></tt>, <tt><em>stdout</em></tt>
- et <tt><em>stderr</em></tt>:<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>
-
-<h1>Écriture de script <i>shell</i></h1>
-<div class="sws-slide">
- <h1>Script shell</h1>
- <p><a>Mentalité Unix</a> beaucoup de petits programmes spécifiques,
- que l'on combine au moyen de scripts pour réaliser des actions
- complexes. Exemple de fichier script:
- </p>
- <code style="background:white;">
- <s>#!/bin/bash</s>
-
- <s>for</s> i <s>in</s> img_*.jpg
- <s>do</s>
- base=$(echo "$i" | cut -f 2- -d '_')
- nouveau=photo_"$base"
- <s>if</s> test -f "$nouveau"
- <s>then</s>
- echo "Attention, le fichier $nouveau existe déjà"
- continue
- <s>else</s>
- echo "Renommage de $i en $nouveau"
- mv "$i" "$nouveau"
- <s>fi</s>
- <s>done</s>
- </code>
-</div>
-<div class="sws-slide">
-<h1>Rendre un script exécutable</h1>
-<p>Si un fichier <a>texte</a> (quel que soit son extension), commence
- par les caractères <tt>#!/chemin/vers/un/programme</tt>, on peut
- rendre ce fichier exécutable (<tt>chmod +x</tt>). Si on l'exécute,
- le contenu du fichier est passé comme argument à <tt>programme</tt>
- (qui est généralement un interpréteur)
-</p>
-<p><tt>#!/bin/bash</tt> signifie que le corps du fichier est passé au
- programme <tt>bash</tt> qui est l'interprète de commande
- (le <i>shell</i>).
-</p>
-</div>
-<div class="sws-slide">
-<h1>Que mettre dans un script</h1>
-<ul>
- <li> des commandes (comme si on les entrait dans le terminal)</li>
- <li> des structures de contrôle (boucles <tt>for</tt>, <tt>if then
- else</tt>) </li>
- <li> des définitions de variables </li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Définitions de variables</h1>
-<p>On peut définir des variables au moyen de la notation
-<code>VARIABLE=<i>contenu</i></code> et on peut utiliser la variable
-avec la notation <tt>$VARIABLE</tt> </p>
-<ul>
- <li>Attention, pas d'espace autour du <tt>=</tt></li>
- <li>nom de variable en majuscule ou minuscule</li>
- <li>contenu est une chaine de caractères. Si elle contient des
- espaces, utiliser <tt>" ... "</tt></li>
-</ul>
-<p>exemple de définition :</p>
-<code> i=123
- j="Ma super chaine"
- TOTO=titi
- echo $TOTO
-</code>
-<p> exemple d'utilisation: <tt> echo $j $i $TOTO </tt><br/>
-affiche « <tt> Ma super chaine 123 titi</tt></p>
-</div>
-<div class="sws-slide">
-<h1>Boucles <tt>for</tt></h1>
-<p>Les boucles <tt> for </tt> ont la syntaxe:
-<code>
- for VARIABLE in elem<sub>1</sub> ... elem<sub>n</sub>
- do
- ....
- done
-</code>
-chaque <tt>elem<sub>i</sub></tt> est expansé (comme une ligne de
-commande) avant l'évaluation de la boucle:
-<code>
- for i in *.txt
- do
- echo $i est un fichier texte
- done
-</code>
-On peut quitter une boucle prématurément en utilisant <tt>break</tt>
-et passer directement au tour suivant avec <tt>continue</tt>
-</p>
-</div>
-<div class="sws-slide">
-<h1>Conditionnelle</h1>
-<p>La syntaxe est :
-<code> if <i>commande</i>
- then
- ...
- else
- ...
- fi
-</code>
-<tt><i>commande</i></tt> est évaluée. Si elle se termine avec succès,
-la branche <tt>then</tt> est prise. Si elle se termine avec un code
-d'erreur, la branche <tt>else</tt> est prise. On peut utiliser la
-commande <tt>test</tt> qui permet de tester plusieurs conditions
-(existance d'un fichier, égalités de deux nombres, ...) et se termine
-par un succès si le teste est vrai et par un code d'erreur dans le
-cas contraire</p>
-</div>
-<div class="sws-slide">
-<h1>Conditionnelle (exemple)</h1>
-<p>On regarde tour à tour si fichier1.txt, fichier2.txt, ... existent :
-<code>
- for i in 1 2 3 4 5 6
- do
- if test -f "fichier$i".txt
- then
- echo le fichier "fichier$i".txt existe
- fi
- done
-</code>
-</p>
- </div>
-<div class="sws-slide">
-<h1>Sous-commandes et chaines</h1>
-<p>Il est pratique de pouvoir mettre <a>l'affichage d'une commande</a>
- dans une variable. On utilise <tt>$( commande ... )</tt>:
-<code>
- MESFICHIER=$(ls *.txt)
- for i in $MESFICHIER
- do
- echo Fichier: $i
- done
-</code>
-Attention à la présence de guillemets autour des variables. S'il y a
-f1.txt et f2.txt dans le répertoire courant:<br/>
-<code style="left:10%;position:relative;width:40%;float:left;">
- MESFICHIER=$(ls *.txt)
- for i in $MESFICHIER
- do
- echo Fichier: $i
- done
-<s>affiche:</s>
- Fichier: f1.txt
- Fichier: f2.txt
-</code>
-<code style="width:40%;float:left;left:10%;position:relative">
- MESFICHIER=$(ls *.txt)
- for i in "$MESFICHIER"
- do
- echo Fichier: $i
- done
-<s>affiche:</s>
- Fichier: f1.txt f2.txt
-</code>
-</p>
-</div>
-<div class="sws-slide">
-<h1>Commandes utiles</h1>
-<ul>
- <li><tt>seq <i>m</i> <i>n</i> </tt> : affiche la liste de tous les
- nombres entre <i>m</i> <i>n</i> </li>
-<li><tt>echo ... </tt> affiche ses arguments sur la sortie
- standard</li>
-<li><tt>printf "chaine" ... </tt> affiche ses arguments au moyen d'une
- chaine de format (comme le printf de C)</li>
-<li><tt>date</tt> : affiche la date courante </li>
-<li><tt>cut</tt> : découpe une chaine selon des caractères de
- séparations ou des positions</li>
-</ul>
-</div>
-<h1>Programmes non interactifs</h1>
-<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="unix_prog_web_03.xhtml" />
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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>
- <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>
-
-
- <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>
-
- <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>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>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 style="font-family:serif;color:black;">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;font-family:serif;"
- 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 style="font-family:serif;color:black;">
-<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>
-<div class="sws-slide">
- <h1>Structure d'un document XHTML</h1>
- <p>Pour être <i>valide</i> un document XHTML contient <a>au
- moins</a> les balises suivantes : </p>
- <ul> <li>Une balise <tt>html</tt> qui est la <a>racine</a> (elle
- englobe toutes les autres balises). La balise <tt>html</tt>
- contient deux balises filles: <tt>head</tt> et <tt>body</tt></li>
- <li>La balise <tt>head</tt> représente l'en-tête du document.
- Elle peut contenir diverses informations (feuilles de styles,
- titre, encodage de caractères, …). La seule
- balise <a>obligatoire</a> dans <tt>head</tt> est le titre
- (<tt>title</tt>). C'est le texte qui est affiché dans la barre
- de fenêtre du navigateur ou dans l'onglet.
- </li>
- <li>la balise <tt>body</tt> représente le contenu de la page. On y
- trouve diverses balises (<tt>div</tt>, <tt>p</tt>, <tt>table</tt>,
- …) qui formattent le contenu de la page</li>
- </ul>
-</div>
-<h1>Encodage des caractères (UTF-8) (digression)</h1>
- <div class="sws-slide">
- <h1>Représentation des textes</h1>
- <p>Avant de représenter des documents complexes, on s'intéresse
- aux textes (sans structure particulière)</p>
- <p class="sws-pause">Problématique: comment représenter du texte
- réaliste ?</p>
- <p>Exemple de texte réaliste:<br/>
- <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
- <tt>"</tt>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Historiquement…</h1>
- <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
- <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
- <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
- symboles »</li>
- <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
- (lettres accentuées française, italienne, …)</li>
- <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
- (Serbe, Hongrois, Croate, Tchèque, …)</li>
- <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
- esperanto, </li>
- <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
- lituanien, …</li>
- <li class="sws-pause"> … </li>
- <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
- remplacés (par exemple pour « € » à la place de « ¤ »)</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>… et pendant ce temps là, ailleur dans le monde </h1>
- <p>Encodage multi-octets:</p>
- <ul>
- <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
- <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
- </ul>
- <p>Impossibilité de mettre plusieurs « alphabets » dans un même
- texte</p>
- <p>Chaque logiciel « interprétait » les séquences d'octet de
- manière prédéfinie</p>
- </div>
- <div class="sws-slide">
- <h1>UTF-8</h1>
- <p>Universal (Character Set) Transformation Format 8 bit</p>
- <ul><li>Encodage à taille variable « universel » (contient tous
- les alphabets connus)</li>
- <li>Un organisme (ISO) donne un code à chaque symbole</li>
- <li>Compatible avec ASCII 7 bits</li>
- </ul>
- <p>Encodage</p>
- <table class="withborder" style="position:relative;left:8%;">
- <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
- 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
- <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
-
- <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
- <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
- <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
-
- <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
- <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
-
- </table>
- </div>
- <div class="sws-slide">
- <h1>Exemples</h1>
- <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
- ⟶ 0100 1010<sub>2</sub> (représenté sur un
- seul octet)</p>
-
- <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
- ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
- 3 octets) : <br/>
- <s>1110</s><em>0001</em> <s>10</s><em>11 10
- 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
-</p>
- <p><tt style="font-size:200%">🐵</tt>
- ⟶ 128053<sub>10</sub> ⟶ …
- ≡ 240 237 220 181</p>
- <p>Avantages</p>
- <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
- anglais sont toujours lisibles)</li>
- <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
- caractères font 32 bits)</li>
- </ul>
- <p>Inconvénients</p>
- <ul>
- <li>Caractères à taille variable: il faut parcourir le texte
- pour trouver le n<sup>ème</sup> caractère</li>
- <li>Les vieux logiciels doivent être adaptés</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>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 -->
- <style>
- ul.menu li { padding: 10pt 0pt 10pt 0pt;
- display:block;
- background:orange;
- color:blue;}
- .sous-menu { display : none; }
- ul.menu > li:hover ul.sous-menu { display: block;
- }
- ul.menu > li:hover ul.sous-menu > li {
- background:blue;
- color:orange;
- }
- </style>
- <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="unix_prog_web_04.xhtml" class="sws-previous"/>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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 <tt>style</tt></em></li>
- <li> À une page en utilisant
- l'élément <em><tt><![CDATA[ <style>...</style> ]]></tt></em>
- dans l'en-tête
- du document (dans la
- balise <tt><![CDATA[<head>...</head>]]></tt>).
- </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:xx-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">
-<span style="position:absolute;right:10pt;top:10pt;color:#0a2">fixed
- (right:10pt,top:10pt)</span>
- <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%;"><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>
- </div>
-<p><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code></p>
-<ul style="position:relative;float:right;background:#ddd;">
- <li>Positionnement <span style="position:static;color:#02a">static</span></li>
- <li>Positionnement </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>
-
-<div class="sws-slide">
- <h1>exemple : menu dépliable</h1>
- <code><![CDATA[
- <ul class="menu">
- <li>Entrée 1
- <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
- <li>Sous-entrée 1.2 </li>
- <li>Sous-entrée 1.3 </li>
- </ul>
- </li>
- <li>Entrée 2
- <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
- <li>Sous-entrée 2.2 </li>
- <li>Sous-entrée 2.3 </li>
- </ul>
- </li>
- </ul>
-]]></code>
-</div>
-<div class="sws-slide">
- <h1>Analyse</h1>
- <p>Pour que le ménu soit « dépliable » lors du survol de la souris,
- on souhaite que : </p>
- <ul>
- <li>Par défaut, les éléments de sous-menu soient cachés
- (<tt>display : none</tt>)</li>
- <li>Les éléments se trouvant sous un élément survolé
- (<tt>hover</tt>) soient visibles (<tt>display : block</tt>)
- </li>
- </ul>
-</div>
-<div class="sws-slide">
- <h1>exemple : menu dépliable (démo)</h1>
-
- <ul class="menu">
- <li>Entrée 1
- <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
- <li>Sous-entrée 1.2 </li>
- <li>Sous-entrée 1.3 </li>
- </ul>
- </li>
- <li>Entrée 2
- <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
- <li>Sous-entrée 2.2 </li>
- <li>Sous-entrée 2.3 </li>
- </ul>
- </li>
-
- </ul>
-</div>
-<div class="sws-slide">
- <h1>Style CSS du menu </h1>
-<p><code>
- li { padding: 10pt 0pt 10pt 0pt;
- display:block;
- background:orange;
- color:blue;
- }
- .sous-menu { display : none; }
-
- ul.menu > li:hover ul.sous-menu { display: block; }
- ul.menu > li:hover ul.sous-menu > li {
- background:blue;
- color:orange;
- }
-</code>
-</p>
-</div>
-<div class="sws-slide">
- <h1>Priorité d'application des règles (cascade)</h1>
- <p>Les règles sont appliquées dans l'ordre suivant : </p>
- <ul>
- <li>On applique toutes les règles des fichiers CSS référencés,
- dans l'ordre. Si plusieurs règles sont valides, elles sont
- appliquées dans l'ordre (en écrasant les comportement précédents,
- s'ils portent sur les mêmes attributs)</li>
- <li>Puis on applique les règles se trouvant dans
- l'élément <tt>style</tt> du fichier HTML courant</li>
- <li>Puis on applique enfin les règles se trouvant dans
- l'attribut <tt>style</tt></li>
- </ul>
-</div>
-<div class="sws-slide">
-<h1><tt>z-index</tt></h1>
-<p>Il arrive que certaines boites se recouvrent : </p>
-<div style="position:relative;margin-left:30pt;height:200pt;">
- <div style="position:absolute;top:0pt;left:0pt;background:red;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- Du texte recouvert
- </div>
- <div style="position:absolute;top:10pt;left:10pt;background:blue;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- </div>
-</div>
-<p style="position:relative;">On peut utiliser la propriété <tt>z-index</tt> pour définir l'ordre
- d'empilement (plus elle est élevée, plus la boite est en avant plan)
-</p>
-<div style="position:relative;margin-left:30pt;height:200pt">
- <div style="position:absolute;top:0pt;left:0pt;background:red;z-index:2;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- Du texte recouvert
- </div>
- <div style="position:absolute;top:10pt;left:10pt;background:blue;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- </div>
-</div>
-</div>
-<h1>requête <tt>media-type</tt></h1>
-<div class="sws-slide">
- <h1>Différents styles pour différents affichages</h1>
- <p>On peut charger un style CSS de manière conditionnelle grace à
- l'attribut <tt>media</tt> de la balise <tt>link</tt>.
- La valeur de l'attribut est une <a>formule logique</a> où l'on
- peut tester le type de support d'affichage ainsi que ces
- caractéristiques physiques :
- </p>
- <code style="font-size:75%;"> <![CDATA[
- <link rel="stylesheet" type="text/css" href="style1.css" media="all" />
- <link rel="stylesheet" type="text/css" href="style2.css" media="print" />
- <link rel="stylesheet" type="text/css" href="style3.css" media="screen and landscape" />
- <link rel="stylesheet" type="text/css" href="style4.css" media="screen and min-width:480px" />
- <link rel="stylesheet" type="text/css" href="style5.css" media="screen and max-width:479px" />
-]]> </code>
-<p>Cela permet d'appliquer des styles spécifiques lors de l'impression
- d'une page ou pour des terminaux mobiles (ayant une petite taille
- d'écran) ou de changer de style si l'orientation de l'écran est modifiée.</p>
-</div>
-<div class="sws-slide">
- <h1>Gestion du débordement</h1>
- <p>L'attribut <tt>overflow</tt> permet de gérer le débordement. Il
- peut prendre les valeurs <tt>visible</tt>, <tt>hidden</tt> et <tt>auto</tt>
- : </p>
- <div style="width:30%;float:left;overflow:visible; height:100pt;background:#ffa;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div style="width:30%;float:left;overflow:hidden; height:100pt;background:#faf;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div style="width:30%;float:left;overflow:auto; height:100pt;background:#aff;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </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>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="../libs/raphael-min.js" type="text/javascript" ></script>
-
- <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="unix_prog_web_05.xhtml" class="sws-previous"/>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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>
- <li> <em>Expose des Web simplement</em> (ports, URL, requêtes
- HTTP, …)</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>
- <div class="sws-slide">
- <h1>Un mot sur les langages de programmation (subjectif)</h1>
- <ol>
- <li> Il n'y a pas d'excellent langage de programmation. Par
- contre il y a d'excellents programmeurs</li>
- <li> Connaître plusieurs langages aide à devenir un bon
- programmeur (en particulier plusieurs paradigmes différents :
- impératifs, objet, fonctionnel, logique, déclaratif, …).
- </li>
- <li> On ne peut pas vraiment se faire plaisir en informatique
- en étant un mauvais programmeur</li>
- <li>Il y a de très mauvais langages, le plus mauvais étant
- PHP</li>
- </ol>
- </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>
-
-
- <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>
- <div style="position:relative;margin-top:20pt;">
- <div style="margin-left:20pt;display:inline-block;vertical-align:top;float:left;">
- <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 style="margin-left:20pt;display:inline-block;vertical-align:top;">
- <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>
- <br/>
- <p style="position:relative">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>
-
- <p style="position:relative">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>
- </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 : expressions régulières, fichiers, sessions</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2014 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="unix_prog_web_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>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>convertit 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 = <u>"ABCDEFABCDEF"</u>;
- echo preg_match(<em>'/ABC/'</em>, $chaine); <span class="sws-pause">// affiche 1</span>
- <span>echo preg_match(<em>'/DEF/'</em>, $chaine);</span> <span class="sws-pause">// affiche 1</span>
- <span>echo preg_match(<em>'/^ABC/'</em>, $chaine);</span> <span class="sws-pause">// affiche 1</span>
- <span>echo preg_match(<em>'/^DEF/'</em>, $chaine);</span> <span class="sws-pause">// affiche 0</span>
- <span>echo preg_match(<em>'/ABC$/'</em>, $chaine);</span> <span class="sws-pause">// affiche 0</span>
- <span>echo preg_match(<em>'/DEF$/'</em>, $chaine);</span> <span class="sws-pause">// affiche 1</span>
- <span>echo preg_match(<em>'/(ABC...)+/'</em>, $chaine);</span> <span class="sws-pause">// affiche 1</span>
- <span>echo preg_match(<em>'/[^A-Z]+/'</em>, $chaine);</span> <span class="sws-pause">// affiche 0</span>
- <span>echo preg_match(<em>'/[^A-Z]*/'</em>, $chaine);</span> <span class="sws-pause">// affiche 1 !</span>
- <span>echo preg_match(<em>'/^[^A-Z]*$/'</em>, $chaine);</span> <span class="sws-pause">// affiche 0</span>
-?></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>
- <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 paquet 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>epoch</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>Petite digression sur «<i>epoch</i>» </h1>
-<p>Représenter le temps (une date) dans un programme informatique est
- quelque chose de compliqué. Quels problèmes cela pose-t-il ?
-</p>
-<ul>
- <li class="sws-pause">Fuseaux horaires</li>
- <li class="sws-pause">Conversion de temps (de fuseau)</li>
- <li class="sws-pause">Taille des entiers (Bug de l'an 2000, de l'an
- 2038, de l'an 292 277 026 596)</li>
- <li class="sws-pause">Secondes intercalaires (« <i>leap second</i> »)</li>
-</ul>
-<p>Ce n'est pas encore quelque chose de bien maîtrisé !</p>
-</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>Formulaires</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="unix_prog_web_07.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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>Formulaires (utilisation avancée)</h1>
- <div class="sws-slide">
- <h1>Champs de texte</h1>
- <p>On peut placer un champ de texte dans un formulaire au moyen
- de la balise <em><tt><input type="text"
- /></tt></em>.
- </p>
- <code><![CDATA[ <input size="10" name="montexte" type="text" value="abc" />]]></code>
- <p>Apperçu: <input size="10" name="montexte" type="text"
- value="abc"/><br/><br/>
- Attributs:
- </p>
- <ul>
- <li>size: donne la largeur en caractères</li>
- <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
- <li>value: la valeur initiale du champ (si on veut le pré-remplir)</li>
- </ul>
- <p>Accès à la valeur depuis PHP se fait
- via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
- selon la valeur de l'attribut <tt>method</tt> de
- l'élément <tt>form</tt> englobant.</p>
-
- </div>
-
- <div class="sws-slide">
- <h1>Champs de texte long</h1>
- <p>Pour des textes multilignes, on utilise la
- balise <em><tt><textarea /></tt></em>.
- </p>
- <code><![CDATA[ <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
-]]></code>
- <p>Apperçu: <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
- Attributs:
- </p>
- <ul>
- <li>rows: donne le nombre de lignes</li>
- <li>cols: donne le nombre de colonnes (largeur en nombre de caractères)</li>
- <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
- </ul>
- <p>On peut pré-remplir la zone en mettant du texte entre la
- balise ouvrante et fermante.
- Accès à la valeur depuis PHP se fait
- via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
- selon la valeur de l'attribut <tt>method</tt> de
- l'élément <tt>form</tt> englobant.</p>
- </div>
- <div class="sws-slide">
- <h1>Listes déroulantes</h1>
- <p>On peut définir une liste déroulante avec les
- balises <tt><select></tt> et <tt><option></tt></p>
-<code><![CDATA[
- <select name="maliste">
- <option value="bleu" >Bleu</option>
- <option value="vert" >Vert</option>
- <option value="rouge" >Rouge</option>
- <option value="jaune" selected="selected" >Jaune</option>
- </select>
-]]></code>
-<p> Apperçu: <select name="maliste">
- <option value="bleu" >Bleu</option>
- <option value="vert" >Vert</option>
- <option value="rouge" >Rouge</option>
- <option value="jaune" selected="selected" >Jaune</option>
- </select>
- Attributs:
- </p>
- <ul>
- <li>name (dans select): le nom de l'élément (pour y accéder
- depuis PHP)</li>
- <li>value (dans option): donne la valeur du choix</li>
- <li>checked (dans option): pré-selectionne cette option</li>
- </ul>
- <p>Le contenu de chaque élément option est celui affiché dans la
- liste.
- Accès à la valeur depuis PHP se fait
- via <tt>$_GET["maliste"]</tt> ou <tt>$_POST["maliste"]</tt>
- selon la valeur de l'attribut <tt>method</tt> de
- l'élément <tt>form</tt> englobant.</p>
- </div>
- <div class="sws-slide">
- <h1>Boutons à choix unique</h1>
- <p>On peut définir un choix avec la balise
- <tt><input type="radio"></tt></p>
-<code><![CDATA[
- 8h<input type="radio" name="h" value="matin"/>
- 12h<input type="radio" name="h" value="midi"/>
- 20h<input type="radio" name="h" value="soir"/>
-]]>
-</code>
-<p>Apperçu : 8h<input type="radio" name="h" value="matin"/>
-12h<input type="radio" name="h" value="midi"/>
-20h<input type="radio" name="h" value="soir"/>
-</p>
- <p>
- Accès à la valeur depuis PHP se fait
- via <tt>$_GET["h"]</tt> ou <tt>$_POST["h"]</tt>
- selon la valeur de l'attribut <tt>method</tt> de
- l'élément <tt>form</tt> englobant.<br/>
- <s>Attention</s> il faut réutiliser la même valeur de
- l'attribut <tt>name</tt> pour les boutons du même groupe.
-
-</p>
-</div>
- <div class="sws-slide">
- <h1>Cases à choix multiples</h1>
- <p>On peut définir des cases à cocher à choix multiple avec la balise
- <tt><input type="radio"></tt></p>
-<code><![CDATA[
- 8h<input type="checkbox" name="tab[]" value="matin"/>
- 12h<input type="checkbox" name="tab[]" value="midi"/>
- 20h<input type="checkbox" name="tab[]" value="soir"/>
-]]>
-</code>
-<p>Apperçu:
- 8h<input type="checkbox" name="tab[]" value="matin"/>
- 12h<input type="checkbox" name="tab[]" value="midi"/>
- 20h<input type="checkbox" name="tab[]" value="soir"/>
-</p>
- <p>
- Accès à la valeur depuis PHP se fait
- via <tt>$_GET["tab"]</tt> ou <tt>$_POST["tab"]</tt>
- selon la valeur de l'attribut <tt>method</tt> de
- l'élément <tt>form</tt> englobant.<br/>
- <s>Attention</s> il faut rajouter <tt>[]</tt> dans l'attribut <tt>name</tt> pour
- que PHP crée un tableau. <tt>tab[<i>i</i>]</tt> contient la
- valeur de la <i>i<sup>ème</sup></i> cases cochée (à partir de 0).
-
-</p>
-</div>
-<h1>Variables super-globales (rappels)</h1>
-<div class="sws-slide">
- <h1>Variables super-globales</h1>
- <p>PHP définit un certain nombre de variables dites
- « super-globales ». Ce sont des variables accessible
- depuis n'importe où dans un programme PHP, y compris depuis des
- fonctions, sans adjonction du mot clé <tt>global</tt>.</p>
- <code>
- $TOTO = 42;
- function f() {
- global $TOTO; // obligatoire, sinon $TOTO n'est pas visible
-
- echo $TOTO;
- echo $_GET["champ"]; //fonctionne toujours, même sans 'global'
- //au début de la fonction.
-
- }
-
- </code>
-</div>
-<div class="sws-slide">
-<h1>Variable <tt>$_GET</tt> et <tt>$_POST</tt></h1>
-<p>
- Ces variables contiennent les valeurs des champs d'un formulaire.
- Si l'attribut <tt>method</tt> de l'élément <tt>form</tt>
- vaut <tt>get</tt> la variable <tt>$_GET</tt> contient les valeurs.
- S'il vaut <tt>post</tt> la variable <tt>$_POST</tt> est à utiliser.
-</p>
-</div>
-<div class="sws-slide">
-<h1>Variable <tt>$_FILES</tt></h1>
-<p>
- Cette variable contient les informations relatives aux fichiers
- envoyés par le client.<br/>Si le nom du champ est <tt>fichier</tt>,
- alors:
-
-</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>Variable <tt>$_SESSION</tt></h1>
-<p>Contient les <em>variables de sessions</em>. La variable n'est
- accessible qu'après un appel à <tt>session_start()</tt>. Ces
- le contenu de cette variable persiste durant toute la durée de la
- session même sur des pages différentes. La
- variable <tt>$_SESSION</tt> est un tableau.
-</p>
-</div>
-
-<div class="sws-slide">
-<h1>Variable <tt>$_COOKIE</tt></h1>
-<p>Contient les <em>cookies</em> que le client à envoyé au serveur.
- La
- variable <tt>$_COOKIE</tt> est un tableau.
-</p>
-</div>
-<h1>Conception d'une application simple (étude de cas)</h1>
-<div class="sws-slide">
- <h1>Cahier des charges</h1>
- <p>On souhaite créer une application Web simple de gestion de QCM.
- L'application doit répondre au contraintes suivantes :
- </p>
- <ul>
- <li>Un QCM est un ensemble de questions, suivies d'une liste de
- choix. Il peut y avoir plusieurs choix possible. La réponse à la
- question est correcte si uniquement les bons choix sont
- sélectionnés.</li>
- <li>Un QCM doit être facilement modifiable/éditable</li>
- <li>Après la réponse à la dernière question, le score de
- l'utilisateur est affiché, ainsi que les bonnes réponses</li>
- <li>Il y a un temps limite par question</li>
- </ul>
-</div>
-<div class="sws-slide">
-<h1>But du jeu</h1>
-<p>Nous allons concevoir, le plus précisément possible l'application
- (prenez des notes) :
-</p>
-
- <ul>
- <li>Rafiner le cahier des charges</li>
- <li>Prévoir plusieurs scénarios d'utilisation</li>
- <li>Concevoir l'application (données, interface grapique,
- code)</li>
- <li>Tester/vérifier la robustesse</li>
- </ul>
-<p>Vous devrez écrire le code correspondant en TP</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>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="unix_prog_web_08.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</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>Une analogie</h1>
- <p>La cryptographie assymétrique fonctionne exactement comme
- l'analogie de la boîte aux
- lettres. Pourquoi ?
- </p>
- <ul class="sws-pause">
- <li>La clé publique est la boîte aux lettres</li>
- <li>La clé privée est la clé de la boîte aux lettres</li>
- <li>Tout le monde peut «crypter» un message en le glissant
- dans ma boîte aux lettres</li>
- <li>Une fois le message crypté (<i>i.e.</i> dans la boîte) il
- est difficile de le récupérer sans avoir la clé</li>
- <li>Il est facile pour moi d'ouvrir la boîte avec ma clé</li>
- </ul>
-
- </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
- <em>prouver</em> à 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 statistiques ou de deni
- de service (DoS).
- </p>
- </div>
- <div class="sws-slide">
- <h1>Bug dans HTTPS: <i>Heartblead</i></h1>
- <p><i>Heartblead</i> est un bug découvert en 2014 dans la
- bibliothèque OpenSSL (Bibliothèque qui implémente toutes les
- primitives cryptographiques de bas niveau nécessaire à HTTPS,
- entre-autres, et utilisée par tout le monde). Cette attaque
- touche la partie <i>heartbeat</i> du
- protocole. Le <i>heartbeat</i> est un message périodique
- envoyé par le client au serveur pour lui demander si la
- connexion/session est toujours active (ou pour lui signaler de
- ne pas la fermer).
- </p>
- <ul>
- <li class="sws-pause">Serveur, es-tu vivant ? si oui répond 'Bonjour' (6
- lettres)</li>
- <li class="sws-pause">Bonjour</li>
- <li class="sws-pause">Serveur, es-tu vivant ? si oui répond
- 'Je suis là' (10 lettres)</li>
- <li class="sws-pause">Je suis là</li>
- <li class="sws-pause">Serveur, es-tu vivant ? si oui répond
- 'Oui' (1024 lettres)</li>
- <li class="sws-pause">Oui<span class="sws-pause"
- style="color:gray;"><tt>....Serveur, je suis l'admin, modifie le
- mot de passe à '1023hasd834!' ... Tiens, autre client, je
- t'envoie la page que tu m'as demandée ... <html><body ....</tt></span></li>
- </ul>
- </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>($code)</code>
- <tt><em>$code</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 SHELL (en PHP)</h1>
- <p><s>Problème</s> lié à l'utilisation de la fonction
- <code> <s>exec</s>($command, &$output)</code>
- Cette fonction exécute dans un SHELL la
- commande <tt>$command</tt>. Les lignes de la sortie standard
- de la commande sont placées dans le table <tt>$output</tt>
- passé en référence. (Démo avec <tt>unzip -l</tt>).<br/>
- Solutions:
- </p>
- <ul>
- <li>Ne jamais passer à exec directement une chaîne crée par
- l'utilisateur</li>
- <li>Recréer sois-même la chaîne de caractères, échapper les
- caractères spéciaux et remettre le tout dans une chaîne pour
- éviter les expansions du SHELL</li>
- <li>Utiliser des fonctions de la bibliothèque standar quand
- elle existes (par exemple <tt>rename</tt> plutot
- que <tt>exec('mv ...')</tt>).</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
-<recette difficulte="facile">
-<title>Tiramisú</title>
-<ingredients>
- <ingredient>mascarpone</ingredient>
- <ingredient>oeufs</ingredient>
- <ingredient>sucre</ingredient>
- <ingredient>café</ingredient>
- <ingredient>biscuits</ingredient>
-</ingredients>
-<duree>2h</duree>
-<etapes>
- <e num="1">Séparer les blancs des jaunes</e>
- <e num="2">…</e>
- …
-</etapes>
-</recette>
+++ /dev/null
-<xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:template match="/">
- <html>
- <head>
- <title>Foo</title>
- </head>
- <body>
- <xsl:variable name="nombalise">
- <xsl:choose>
- <xsl:when test="count(descendant::ingredient) mod 2 = 0">b</xsl:when>
- <xsl:otherwise>i</xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <xsl:element name="{$nombalise}">
- Gras
- </xsl:element>
- </body>
- </html>
- </xsl:template>
-</xsl:stylesheet>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<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"
- version="1.1"
- viewBox="-10 -10 934.30447 1320.5428"
- id="svg2"
- inkscape:version="0.48.5 r10040"
- sodipodi:docname="tree.svg"
- width="1044cm"
- height="1330cm">
- <metadata
- id="metadata40">
- <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 />
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1317"
- inkscape:window-height="744"
- id="namedview38"
- showgrid="true"
- inkscape:zoom="0.70710678"
- inkscape:cx="475.31215"
- inkscape:cy="445.37894"
- inkscape:window-x="49"
- inkscape:window-y="24"
- inkscape:window-maximized="1"
- inkscape:current-layer="svg2"
- fit-margin-top="0"
- fit-margin-left="0"
- fit-margin-right="0"
- fit-margin-bottom="0"
- units="cm">
- <inkscape:grid
- type="xygrid"
- id="grid3052"
- empspacing="5"
- visible="true"
- enabled="true"
- snapvisiblegridlinesonly="true"
- originx="-15.123041px"
- originy="1285.6658px" />
- </sodipodi:namedview>
- <defs
- id="defs4" />
- <g
- id="g3054"
- transform="matrix(3.776905,0,0,3.776905,27.769048,27.769503)">
- <path
- sodipodi:nodetypes="cc"
- d="m 129.87695,39.876949 -80,15"
- id="p1"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- sodipodi:nodetypes="cc"
- d="m 129.87695,39.876949 75,15"
- id="p2"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="M -0.12304184,94.876944 49.876959,54.876952 l -30,39.999992"
- id="path3007"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="m 39.876959,94.876944 10,-39.999992 10,39.999992"
- id="path3009"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="m 79.876959,94.876944 -30,-39.999992 49.999998,39.999992"
- id="path3011"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="m 174.87695,94.876944 30,-39.999995 -10,39.999995"
- id="path3013"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="m 214.87695,94.876944 -10,-39.999995 30,39.999995"
- id="path3015"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- inkscape:connector-curvature="0" />
- <text
- class="bibliography"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="166.55959"
- y="34.876949"
- id="text3017"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="129.87697"
- y="34.876949"
- id="tspan3019">bibliography</tspan></text>
- <text
- class="book"
- style="font-size:12px;text-align:end;text-anchor:end"
- x="72.990227"
- y="54.876957"
- id="text3017-6"
- xml:space="preserve"><tspan
- style="text-align:end;text-anchor:end"
- x="44.876949"
- y="54.876957"
- id="tspan3019-6">book</tspan></text>
- <text
- style="font-size:12px"
- class="book"
- x="204.87695"
- y="54.876957"
- id="text3017-7"
- xml:space="preserve"><tspan
- x="204.87695"
- y="54.876957"
- id="tspan3019-8">book</tspan></text>
- <text
- class="title"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-98.626953"
- y="-0.12304688"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3017-6-5"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-109.87695"
- y="-0.12304688"
- id="tspan3019-6-2">title</tspan></text>
- <text
- class="author"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-95.450188"
- y="19.876953"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-114.87695"
- y="19.876953"
- id="tspan3074">author</tspan></text>
- <text
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-95.450188"
- y="59.876949"
- transform="matrix(0,-1,1,0,0,0)"
- class="author"
- id="text3072-2"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-114.87695"
- y="59.876949"
- id="tspan3074-8">author</tspan></text>
- <text
- class="year"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-96.667"
- y="99.876945"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-2-8"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-109.87695"
- y="99.876945"
- id="tspan3074-8-2">year</tspan></text>
- <text
- class="publisher"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-92.572273"
- y="79.876945"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-2-5"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-119.87695"
- y="79.876945"
- id="tspan3074-8-5">publisher</tspan></text>
- <text
- class="title"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-98.626953"
- y="174.87695"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3017-6-5-6"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-109.87695"
- y="174.87695"
- id="tspan3019-6-2-2">title</tspan></text>
- <text
- class="author"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-95.450188"
- y="194.87695"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-1"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-114.87695"
- y="194.87695"
- id="tspan3074-61">author</tspan></text>
- <text
- class="year"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-96.667"
- y="234.87695"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-2-8-1"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-109.87695"
- y="234.87695"
- id="tspan3074-8-2-6">year</tspan></text>
- <text
- class="publisher"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-97.572273"
- y="214.87695"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-2-5-9"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-124.87695"
- y="214.87695"
- id="tspan3074-8-5-9">publisher</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3018"
- y="-0.12304688"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="-0.12304688"
- x="-159.87695"
- id="tspan3020"
- sodipodi:role="line">"Foundations of Databases"</tspan><tspan
- id="tspan3022"
- y="16.126953"
- x="-159.87695"
- sodipodi:role="line" /></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3024"
- y="19.876953"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="19.876953"
- x="-159.87695"
- id="tspan3026"
- sodipodi:role="line">"Abiteboul"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3028"
- y="39.876949"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="39.876949"
- x="-159.87695"
- id="tspan3030"
- sodipodi:role="line">"Hull"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3032"
- y="59.876949"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="59.876949"
- x="-159.87695"
- id="tspan3034"
- sodipodi:role="line">"Vianu"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3036"
- y="79.876945"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="79.876945"
- x="-159.87695"
- id="tspan3038"
- sodipodi:role="line">"Addison Wesley"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3040"
- y="99.876945"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="99.876945"
- x="-159.87695"
- id="tspan3042"
- sodipodi:role="line">"1995"</tspan></text>
- <flowRoot
- transform="translate(-7.7098237,-16.029665)"
- style="font-size:13px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- id="flowRoot3044"
- xml:space="preserve"><flowRegion
- id="flowRegion3046"><rect
- y="198.9726"
- x="-96.57534"
- height="293.8356"
- width="365.75342"
- id="rect3048" /></flowRegion><flowPara
- id="flowPara3050" /></flowRoot> <path
- inkscape:connector-curvature="0"
- id="path3054"
- d="m -2.7098242,128.97032 0,30"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3056"
- d="m 17.290177,138.97032 0,20"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3058"
- d="m 37.290177,138.97032 0,20"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0"
- id="path3060"
- d="m 57.290177,138.97032 0,20"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3062"
- d="m 77.290177,153.97032 0,5"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3064"
- d="m 97.290177,128.97032 0,30"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3018-7"
- y="174.87695"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="174.87695"
- x="-159.87695"
- id="tspan3020-5"
- sodipodi:role="line">"The Lord of the Rings"</tspan><tspan
- id="tspan3022-7"
- y="191.12695"
- x="-159.87695"
- sodipodi:role="line" /></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3024-9"
- y="194.87695"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="194.87695"
- x="-159.87695"
- id="tspan3026-6"
- sodipodi:role="line">"J. R. R. Tolkien"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3036-4"
- y="214.87695"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="214.87695"
- x="-159.87695"
- id="tspan3038-0"
- sodipodi:role="line">"Houghton Mifflin"</tspan></text>
- <text
- transform="matrix(0,-1,1,0,0,0)"
- sodipodi:linespacing="125%"
- id="text3040-1"
- y="234.87695"
- x="-159.87695"
- style="font-size:13px;font-style:normal;font-weight:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
- xml:space="preserve"><tspan
- y="234.87695"
- x="-159.87695"
- id="tspan3042-2"
- sodipodi:role="line">"2001"</tspan></text>
- <path
- inkscape:connector-curvature="0"
- id="path3054-9"
- d="m 172.29017,128.97032 0,30"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3056-2"
- d="m 192.29017,138.97032 0,20"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3062-6"
- d="m 212.29017,153.97032 0,5"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <path
- inkscape:connector-curvature="0"
- id="path3064-8"
- d="m 232.29017,128.97032 0,30"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <text
- class="document"
- sodipodi:linespacing="125%"
- id="text3199"
- y="-0.1230491"
- x="129.87697"
- style="font-size:13px;font-style:normal;font-weight: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:Sans"
- xml:space="preserve"><tspan
- y="-0.1230491"
- x="129.87697"
- id="tspan3201"
- sodipodi:role="line">#document</tspan></text>
- <path
- inkscape:connector-curvature="0"
- id="path3203"
- d="m 129.87695,4.8769496 0,20.0000004"
- style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
- <text
- class="author"
- style="font-size:12px;text-align:center;text-anchor:middle"
- x="-95.450188"
- y="39.876949"
- transform="matrix(0,-1,1,0,0,0)"
- id="text3072-2-0"
- xml:space="preserve"><tspan
- style="text-align:center;text-anchor:middle"
- x="-114.87695"
- y="39.876949"
- id="tspan3074-8-4">author</tspan></text>
- </g>
-</svg>
+++ /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>Introduction, UTF-8 et XML</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="" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et 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 >XML pour la représentation des données
- <ul>
- <li>Motivation, présentation d'XML sérialisé (cours 1) </li>
- <li>Notions de schémas et de validation (cours 1) </li>
- </ul>
- </li>
- <li class="sws-pause" style="padding:20pt 0;" > Interroger des
- documents XML
- <ul>
- <li>XPath (cours 2-3)</li>
- <li>XSLT (cours 3-4)</li>
- </ul>
- </li>
- <li class="sws-pause" style="padding:20pt 0;" > Programmer
- avec XML
- <ul>
- <li>Les modèles DOM et SAX (cours 5)</li>
- <li>XML Avancé: encodage relationnel (cours 6)</li>
- </ul>
- </li>
-
- </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 (33%): Projet (soutenances fin janvier)
- </li>
- <li> Examen écrit (67%) </li>
- </ul>
- </li>
- <li class="sws-pause" >
- 2<sup>ème</sup> session (examen 100%)</li>
- </ul>
- <p>Organisation:</p>
- <ul>
- <li> 8 séances de cours</li>
- <li> 8 séances de TD (sur machine)</li>
- </ul>
- </div>
- <h1>Introduction</h1>
- <div class="sws-slide" >
- <h1>Qu'est-ce qu'XML ?</h1>
- <p>XML (eXtensible Markup Language) est un standard de
- représentation de données</p>
- <ul>
- <li>Conçu pour être lisible par un humain, mais traîtable
- simplement par les machines</li>
- <li>Permet la représentation de données structurées</li>
- <li>Est <em>normalisé</em> (par le W3C)</li>
- <li>Typé (notion de schéma très fine)</li>
- </ul>
- </div>
- <div class="sws-slide" >
- <h1>En a-t-on besoin ?</h1>
- <p>Quels sont les autres moyen de représenter les données ?</p>
- <ul>
- <li class="sws-pause">Table relationnelle</li>
- <li class="sws-pause">Fichiers textes non structurés</li>
- <li class="sws-pause">Format binaires <i>ad-hoc</i></li>
- </ul>
- <p class="sws-pause">Quels sont les désavantages des
- représentations ci-dessus ?</p>
- <ul>
- <li class="sws-pause">Non échangeable (il faut faire
- un <i>dump</i> de la base), contraintes simples</li>
- <li class="sws-pause">Lisible, mais sans structure donc
- difficilement utilisable par un programme, pas de schéma</li>
- <li class="sws-pause">Lié à une utilisation particulière</li>
- </ul>
-
- </div>
-
-
- <div class="sws-slide">
- <h1>Historique</h1>
- <ul>
- <li>Fin des années 1980: SGML adopté pour la publication de
- média</li>
- <li>Milieu des années 1990: un groupe de travail commence à
- étudier l'utilisation de SGML pour le Web (qui débutait)
- </li>
- <li>1998 : XML 1.0 devient une recommandation du W3C</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Exemples d'utilisation</h1>
- <ul>
- <li>Page Web (XHTML)</li>
- <li>Flux RSS (atom)</li>
- <li>Voix sur IP/Messagerie instantanée (SMIL/Jabber)</li>
- <li>Images vectorielles (SVG)</li>
- <li>Données biologiques (séquençages)</li>
- <li>Données financières et bancaires (XBRL)</li>
- <li>Document bureautiques (OpenDocument Format, Office
- 2010)</li>
- <li>Données linguistiques (TreeBank)</li>
- </ul>
-
- </div>
- <h1>Le standard UTF-8</h1>
- <div class="sws-slide">
- <h1>Représentation des textes</h1>
- <p>Avant de représenter des documents complexes, on s'intéresse
- aux textes (sans structure particulière)</p>
- <p class="sws-pause">Problématique: comment représenter du texte
- réaliste ?</p>
- <p>Exemple de texte réaliste:<br/>
- <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
- <tt>"</tt>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Historiquement…</h1>
- <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
- <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
- <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
- symboles »</li>
- <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
- (lettres accentuées française, italienne, …)</li>
- <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
- (Serbe, Hongrois, Croate, Tchèque, …)</li>
- <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
- esperanto, </li>
- <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
- lituanien, …</li>
- <li class="sws-pause"> … </li>
- <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
- remplacés (par exemple pour « € » à la place de « ¤ »)</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>… et pendant ce temps là, ailleur dans le monde </h1>
- <p>Encodage multi-octets:</p>
- <ul>
- <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
- <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
- </ul>
- <p>Impossibilité de mettre plusieurs « alphabets » dans un même
- texte</p>
- <p>Chaque logiciel « interprétait » les séquences d'octet de
- manière prédéfinie</p>
- </div>
- <div class="sws-slide">
- <h1>UTF-8</h1>
- <p>Universal (Character Set) Transformation Format 8 bit</p>
- <ul><li>Encodage à taille variable « universel » (contient tous
- les alphabets connus)</li>
- <li>Un organisme (ISO) donne un code à chaque symbole</li>
- <li>Compatible avec ASCII 7 bits</li>
- </ul>
- <p>Encodage</p>
- <table class="withborder" style="position:relative;left:8%;">
- <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
- 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
- <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
-
- <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
- <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
- <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
-
- <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
- <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
-
- </table>
- </div>
- <div class="sws-slide">
- <h1>Exemples</h1>
- <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
- ⟶ 0100 1010<sub>2</sub> (représenté sur un
- seul octet)</p>
-
- <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
- ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
- 3 octets) : <br/>
- <s>1110</s><em>0001</em> <s>10</s><em>11 10
- 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
-</p>
- <p><tt style="font-size:200%">🐵</tt>
- ⟶ 128053<sub>10</sub> ⟶ …
- ≡ 240 237 220 181</p>
- <p>Avantages</p>
- <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
- anglais sont toujours lisibles)</li>
- <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
- caractères font 32 bits)</li>
- </ul>
- <p>Inconvénients</p>
- <ul>
- <li>Caractères à taille variable: il faut parcourir le texte
- pour trouver le n<sup>ème</sup> caractère</li>
- <li>Les vieux logiciels doivent être adaptés</li>
- </ul>
- </div>
- <h1>XML</h1>
- <div class="sws-slide">
- <h1>Qu'est-ce qu'un document XML ? (1)</h1>
- <ul>
- <li>C'est un fichier texte, encodé par défaut en UTF-8</li>
- <li>Le texte peut être <em>structuré</em> au moyen
- de <em>balises</em></li>
- <li>Une balise est de la forme <tt><foo></tt> (ouvrante)
- ou <tt></foo></tt> (fermante)</li>
- <li>Les balises doivent être bien parenthésées</li>
- <li>Il doit y avoir une racine « englobant » tout le contenu du
- document (texte et autres balises). On appelle cette balise la
- <em>racine</em></li>
- <li>Les balises sont <em>sensibles à la casse</em></li>
- <li><tt><foo/></tt> est un raccourcis pour <tt><foo></tt><tt></foo></tt></li>
- </ul>
- <p>Exemple</p>
- <code style="position:relative;left:10%;color:black;"><![CDATA[<exemple>
- ceci est la racine <balise>on peut</balise> y mettre des
- balises <level><level>imbriquées</level> </level> comme
- on veut si
- elles sont <FOO>bien</FOO> parenthésées
-</exemple>]]>
- </code>
- </div>
- <div class="sws-slide">
- <h1>Qu'est-ce qu'un document XML ? (2)</h1>
- <ul>
- <li>On peut mettre des espaces et des commentaires en dehors de
- la racine</li>
- <li>Les commentaires sont délimités par <s><tt style=""><!--</tt></s> et <s><tt>--></tt></s></li>
- <li>On peut annoter les balises ouvrantes avec
- des <em>attributs</em> de la forme <tt>att</tt>=<tt>"v"</tt> (on
- peut aussi utiliser « ' » pour délimiter les chaînes)</li>
- <li>Au sein d'un même élément (ou balise) on ne peut pas avoir
- deux fois un attribut <em>avec le même nom</em></li>
- <li>On dispose de <em>séquences d'échappement</em>: &lt; pour <,
- &gt; pour >, &apos; pour ', &quot; pour
- ", &amp; pour & et &<tt>nnnn</tt>; pour un caractère
- UTF-8 dont le code décimal est <tt>nnnn</tt>.</li>
- </ul>
- <p>Exemple</p>
- <code style="position:relative;left:10%;color:black;"><<![CDATA[-- commentaire en début de fichier-->
-<exemple id="1">
- Un autre <balise id="2" type="texte">exemple</balise>
-</exemple>]]>
- </code>
-
-</div>
- <div class="sws-slide">
- <h1>Exemple complet (trouver toutes les erreurs)</h1>
-<code style="position:relative;left:10%;color:black;"><![CDATA[
-<exemple id="1">
-
- On se donne cette fois un <FOO>exemple</Foo> complet, mais
-
- <balise>incorrect. En effet, il y a
-
- <note id="32" val='32'>plusieurs</note> erreurs dans
-
- <note id="42" id="51">dans ce document</note>.
-
- Il n'est pas simple de toutes les trouver
-
-</exemple>
-<exemple>En plus cet exemple est en deux parties</exemple>
-]]></code>
- </div>
- <div class="sws-slide">
- <h1>Utilisations d'XML (1)</h1>
- <ul>
- <li>Les noms de balise sont <em>libres</em>. La personne qui
- conçoit le document choisit les balises</li>
- <li>Un document XML est une manière de représenter
- un <em>arbre</em> (l'élement racine est la racine de
- l'arbre)</li>
- </ul>
- <p>Un bon exemple est XHTML (XML pour les pages Web)</p>
- <ul>
- <li>La structure des documents (titres, sections, paragraphes,
- tableaux) est donnée par les balises
- </li>
- <li>Le rendu graphique ne fait pas partie de la structure du
- document et est donné par un moyen annexe (feuille de style
- CSS par exemple)</li>
- </ul>
- <p>Autre exemple: les flux RSS de mises à jour d'un blog</p>
- <ul>
- <li><a href="https://blog.wikimedia.org/feed/">Lien vers le
- blog wikimedia</a></li>
- <li>XML est un exellent format <em> d'échange </em></li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Utilisation d'XML (2)</h1>
- <ul>
- <li>Le format texte est un mauvais format pour
- l'interrogation</li>
- <li>Il encode un arbre mais ne permet pas de le manipuler
- directement</li>
- </ul>
- <p>En réalité, on ne manipule pratiquement jamais de XML tel que stocké
- sur le disque </p>
- <ul>
- <li>On peut charger un document XML sous la forme d'un arbre
- (Objet Java par exemple) dans lequel on peut naviguer</li>
- <li>Certaines bases de données permettent de stocker des
- fichiers XML dans des colones (comme un VARCHAR)</li>
- </ul>
- <p>Une application moderne mélange BD relationnelle et XML (et
- aussi d'autres choses si besoin: JSON, YAML, …)</p>
- </div>
- <div class="sws-slide">
- <h1>Étude de cas: journal en ligne</h1>
- <p>On se pose dans le cas du site internet d'un journal en
- ligne</p>
- <ul>
- <li>Le site a des utilisateurs enregistrés (ainsi qu'un accès
- invité)</li>
- <li>Le site propose des articles en lecture sur le site</li>
- <li>Le site permet d'exporter des articles en PDF pour
- impression</li>
- <li>Le site permet la lecture sur smartphone/tablette</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Une solution possible</h1>
- <ul><li>On stocke les articles comme des fichiers XML avec une
- syntaxe particulière:
-<code style="font-size:80%;position:relative;left:10%;color:black;"><![CDATA[<article>
- <category>Science</category>
- <title>A new planet discovered</title>
- <date>2014/09/09</date>
- <authors>
- <name><first>Jonh</first><last>Doe</last></name>
- <name><first>Someone</first><last>Else</last></name>
- </authors>
- <content>
- <bold>A new plange</bold> has been discovered …
- </content>
-</article>]]>
-</code>
- </li>
-<li>Une <em>BD relationelle</em> stocke les données dynamiques (utilisateurs, …)</li>
-<li>Un <em>programme</em> (Java ou PHP) applique une transformation (XSLT) pour
- transformer les articles XML en pages XHTML</li>
-<li>Le programme utilise la BD pour personaliser l'affichage</li>
-<li style="background:white;">Le programme applique une autre transformation pour transformer
- les articles en PDF plutot que XHTML</li>
-<li style="background:white;">Le programme transforme l'article en un
- XML RSS pour affichage dans un lecteur de blog</li>
-</ul>
- </div>
- <h1>Validation de documents</h1>
- <div class="sws-slide">
- <h1>Schéma d'un document</h1>
- <p>Comme tout le monde peut définir son propre format XML, on
- veut pouvoir être sûr que des <em>données en entrées</em> d'un
- programme ont un certain
- format (par exemple, c'est du XHTML valide, sans balise inconnue
- des navigateurs)
- </p>
- <p>Il existe plusieurs manières de contraindre les balises d'un
- document XML. On s'intéresse dans le cours à la plus simple.
- </p>
- </div>
- <div class="sws-slide">
- <h1>DTD</h1>
- <p>Document Type Definitions. Permet de définir le contenu d'un
- document par des expressions régulières</p>
- <p>Syntaxe particulière qui n'est pas du XML</p>
- <p>Permet de définir:</p>
- <ul><li>les <em>balises autorisées dans un document</em></li>
- <li>le contenu des balises au moyen d'expressions
- régulières</li>
- <li>les <em>attributs d'un élément</em></li>
- <li>le type des <em>valeurs </em> que peut prendre un
- attribut</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Syntaxe des DTD</h1>
- <p>Un fichier contenant une suite de directives de la forme suivantes:</p>
- <ul><li><tt><!ELEMENT <em>nom_elem</em> <em>regexp_elem</em>></tt>
- dit qu'un élement de nom <tt><em>nom_elem</em></tt> contient
- des éléments décrits par l'expression
- régulière <tt><em>regexp_elem</em></tt></li>
- <li><tt><!ATTLIST <em>nom_elem</em> <em>nom_att</em> <em>type_att</em> <em>val_att</em>></tt><br/>
-signifie que l'élément (balise) <tt><em>nom_elem</em></tt>
- a un attribut <em>nom_att</em>, dont le type
- est <tt><em>type_att</em></tt> et la valeur
- est <tt><em>val_att</em></tt></li>
- <li>Les <em>expressions régulières</em> sont formées
- de <tt>*</tt>, <tt>+</tt>,<tt>?</tt>, mise en séquence
- (<tt>,</tt>), <tt>EMPTY</tt> (contenu vide), <tt>ANY</tt>
- (n'importe quel contenu), <tt>#PCDATA</tt> (du texte)</li>
- <li>Les <em>types d'attributs</em> sont <tt>ID</tt> (attribut unique
- dans tous le document ≡ clé primaire), <tt>IDREF</tt> (fait
- référence à un ID unique ≡ clé étrangère), <tt>CDATA</tt>(du
- texte simple), <tt>v1|v2|…|vn</tt> (une liste de valeurs fixées)
- </li>
- <li>Les <em>valeurs d'attributs</em> sont: <tt>v</tt> (une valeur par
- défaut si l'attribut est absent), <tt>#REQUIRED</tt>
- (l'attribut est obligatoire), <tt>#IMPLIED</tt> (l'attribut
- est optionnel), <tt>#FIXED v</tt> (valeur constante v)</li>
-</ul>
-
- </div>
- <div class="sws-slide">
- <h1>Exemple de DTD</h1>
-<code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
-<!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
-<!ELEMENT title #PCDATA >
-<!ELEMENT ingredients (ingredient+) >
-<!ELEMENT duree #PCDATA >
-<!ELEMENT etapes (e*) >
-<!ELEMENT ingredient #PCDATA>
-<!ELEMENT e #PCDATA>
-<!ATTLIST e num CDATA>
-]]></code>
-<p>Question: quel est la taille minimale d'un document valide ?</p>
- </div>
- <div class="sws-slide">
- <h1>Utilisation d'une DTD (1)</h1>
- <p>Il suffit de référencer la DTD dans un élément
- spécial <br/><tt><!DOCTYPE racine SYSTEM "fichier.dtd" ></tt><br/> avant la racine du
- document</p>
-<code style="color:black;position:relative;left:10%;"><![CDATA[
-<!DOCTYPE recette SYSTEM "recette.dtd">
-<recette difficulte="facile">
-<title>Tiramisú</title>
-<ingredients>
- <ingredient>mascarpone</ingredient>
- <ingredient>oeufs</ingredient>
- …
-</ingredients>
-<duree>2h</duree>
-<etapes>
- <e num="1">Séparer les blancs des jaunes</e>
- <e num="2">…</e>
- …
-</etapes>
-</recette>
-]]></code>
- </div>
- <div class="sws-slide">
- <h1>Utilisation d'une DTD (2)</h1>
- <ul>
- <li>Les bibliothèques permettant de charger des fichiers XML
- vérifient qu'il est bien formé (parenthésages, attributs, …)
- </li>
- <li>Elles peuvent aussi <em>valider</em> le document par
- rapport à une DTD</li>
- <li>Si le fichier est invalide, elles lèvent une erreur</li>
- <li>C'est une forme de vérification de contraintes
- d'intégrité</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>XPath</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
-
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_01.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 2</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
-
- <h1>Modèle d'arbre</h1>
-<div class="sws-slide">
-
-<h1>XML vu comme un arbre (1/2)</h1>
-<ul>
-<li>Tout ce qui apparait dans le document correspond à un nœud de
- l'arbre (texte, balises, commentaires, blanc, …)</li>
-<li>Il existe en plus, un nœud fictif se trouvant au dessus de
- l'élément racine, le <a>nœud document</a></li>
-<li>Un couple balise ouvrante/balise fermante correspond à <a>un seul
- nœud</a>
-<li>Les principaux types de nœuds sont: élément, attribut, texte,
- commentaire, document</li>
-</li>
-</ul>
-
-</div>
- <div class="sws-slide">
- <h1>XML vu comme un arbre (2/2)</h1>
- <p>Un document XML peut être vu comme un arbre:</p>
- <code class="inline-xml" style="font-size:80%;width:50%;position:relative;float:left;"><![CDATA[<bibliography>
-
- <book>
- <title>Foundations of Databases</title>
- <author>Abiteboul</author>
- <author>Hull</author>
- <author>Vianu</author>
- <publisher>Addison Wesley</publisher>
- <year>1995</year>
- </book>
-
- <book>
- <title>The Lord of the Rings</title>
- <author>J. R. R. Tolkien</author>
- <publisher>Houghton Mifflin</publisher>
- <year>2001</year>
- </book>
-
-</bibliography>]]></code>
- <embed src="tree.svg" style="width: 10cm; height: 13cm;" />
- </div>
-<div class="sws-slide">
- <h1>Sérialisation d'un arbre sous forme de document</h1>
- <p class="sws-pause">Étant donné un arbre, comment peut ont produire
- le document XML correspondant ?</p>
- <code> //pseudo-code
- void print(Node n)
- {
- if (n is text or comment) { output_text(n) }
- else {
- output_text ("<" + tag(n) + ">");
- for k in children(n)
- print(k);
- output_text ("</" + tag(n) + ">");
- }
- </code>
- <ul style="background:white;">
- <li>On effectue un parcours en profondeur d'abord </li>
- <li>Si le nœud courant est une feuille, on l'affiche</li>
- <li>Sinon on affiche la balise ouvrante, puis récursivement tous
- les fils, puis la balise fermante</li>
- </ul>
-</div>
-<div class="sws-slide">
-<h1>Ordre du document, parcours préfixe</h1>
-<p>On appelle <a>ordre du document</a> un ordre <a>total</a> sur les
- nœuds d'un document qui correspond à leur ordre dans un fichier
- sérialisé. Il correspond aussi à la numérotation lors du parcours
- préfixe</p>
-<ol style="float:left; width:50%">
-<li>#document</li>
-<li>bibliography</li>
-<li>book</li>
-<li>title</li>
-<li>"Foundations of Databases"</li>
-<li>author</li>
-<li>"Abiteboul"</li>
-<li>author</li>
-<li>"Hull"</li>
-<li>author</li>
-<li>"Vianu"</li>
-</ol>
- <embed src="tree.svg" style="width: 10cm; height: 13cm;" />
-
-</div>
-<div class="sws-slide">
-<h1>Construction d'un arbre à partir d'un fichier XML ?</h1>
-<p class="sws-slide">Pour simplifier on suppose un fichier sans texte, uniquement avec
- des balises ouvrantes/fermantes</p>
-<code>
- type Node = { label : string; children : List<Node> }
- Stack<Node> stack;
- stack.push (new Node("#document"), []));
- while (true) {
-
- tag = read ();
- if end_of_file () break;
- if tag is opening {
- parent = stack.peek();
- node = new Node(tag, []);
- parent.addChild(node);
- stack.push(node);
- }
- if tag is closing {
- stack.pop();
- }
- }
-</code>
-<p class="sws-pause">En pratique, on utilise des bibliothèques toutes faites pour
- lire/écrire des fichiers!</p>
-</div>
-<h1>XPath, introduction</h1>
-<div class="sws-slide">
-<h1>Intérogation de documents XML</h1>
-<p>Les documents représentant des données (semi-) structurées, on
- souhaite en extraire de l'information</p>
-<p>On va pouvoir écrire des requêtes sur des <a>critères scalaires</a>
- (
-« renvoyer tous les livres publiés après 2000 »), mais aussi sur des
- critères de <a>structure</a> (« renvoyer tous les éléments qui ont
- un fils <tt>author</tt> »)</p>
-</div>
-<div class="sws-slide">
-<h1>XPath</h1>
-<p>XPath est un langage de <a>selection de nœud</a> dans un document
- XML. Il ne permet <a>que</a> de sélectionner des nœuds, pas d'en
- construire de nouveaux. C'est un langage restreint qui ne contient
- pas de fonctions, variables, … On peut le voir comme un équivalent
- du <tt>SELECT</tt> de SQL</p>
-</div>
-
-<div class="sws-slide">
-<h1>XPath (exemple)</h1>
-<p>Sélectionner tous les titres du document (de manière compliquée)</p>
-<code> <span style="color:#00f">/</span>descendant::<s>author</s>/parent::<a>book</a>/child::<span style="color:#880088">title</span></code>
-<embed src="tree.svg" style="position:relative;left:20%;width: 10cm; height: 13cm;"/>
-<script type="text/javascript">
-var color = function (o,e, c) {
- $(o).find("*[class='" + e + "']").css("fill", c);
-}
-SWS.Presentation.registerCallback(0, function (canvas) {
- var svg = canvas.find("embed")[0].getSVGDocument();
- $(svg).find("text").css({ "font-family":"DIN", "font-size":"70%"});
- color(svg, "author", "#ff0000");
- color(svg, "document", "#0000ff");
- color(svg, "book", "#92b938");
- color(svg, "title", "#880088");
-});
-</script>
-</div>
-<div class="sws-slide">
-<h1>XPath : syntaxe</h1>
-<p>La syntaxe d'une requête XPath est:</p>
-<code> /axe<sub>1</sub>::test<sub>1</sub>[ pred<sub>1</sub> ]/ … /axe<sub>n</sub>::test<sub>n</sub>[ pred<sub>n</sub> ]</code>
-<ul>
-<li><a>axe</a>
- : <tt>self</tt>, <tt>child</tt>, <tt>descendant</tt>, <tt>parent</tt>,
- …
-</li>
-<li><a>test</a> : <tt>node()</tt>, <tt>text()</tt>, <tt>*</tt>, ou un
- nom d'élément </li>
-<li> <a>pred(icat)</a> : chemin XPath, expression arithmétique,
- comparaison, …
-</li>
-<p>exemple:</p>
-<code> /descendant::book[ child::year > 2000] / child::title </code>
-</ul>
-
-</div>
-<div class="sws-slide">
-<h1>XPath : sémantique</h1>
-<p>Étant donné la requête: </p>
-<code> /axe<sub>1</sub>::test<sub>1</sub>[ pred<sub>1</sub> ]/ … /axe<sub>n</sub>::test<sub>n</sub>[ pred<sub>n</sub> ]</code>
-<ol>
- <li>le <a>nœud contexte</a> au nœud <a>document</a></li>
- <li>on sélectionne l'ensemble A<sub>1</sub> <a>tous les nœuds</a> qui sont dans
- l'<tt>axe<sub>1</sub></tt> par rapport au nœud contexte</li>
- <li>on sélectionne l'ensemble T<sub>1</sub> des nœud de
- A<sub>1</sub> qui vérifient le test <tt>test<sub>1</sub></tt></li>
- <li>on sélectionne l'ensemble P<sub>1</sub> des nœud de
- T<sub>1</sub> qui vérifient <tt>pred<sub>1</sub></tt></li>
- <li>On réapplique le pas 2 sur <tt>P<sub>1</sub></tt></li>
- <li> … </li>
-</ol>
-</div>
-<div class="sws-slide">
-<h1>XPath : sémantique (exemple)</h1>
-<div style="width:50%;float:left;">
-<code> <span style="color:#00f">/</span>descendant::<s>author</s>/parent::<a>book</a>/child::<span style="color:#880088">title</span></code>
-<ol><li >On séléctionne le nœud document</li>
-<li >On séléctionne tous les descendants</li>
-<li>On filtre en ne gardant que les nœuds <s>author</s>
- (T<sub>1</sub> ≡ P<sub>1</sub>)</li>
-<li>Sur chacun des <s>author</s> on prend le parent (on n'obtient que
- 2 parents car on garde des ensembles de noeuds)</li>
-<li>On filtre les parents pour ne garder que ceux qui
- sont <a>book</a></li>
-<li>On sélectionne tous les fils de chacun des <a>book</a></li>
-<li>On ne garde que les fils qui ont le
- tag <span style="color:#880088">title</span></li>
-</ol>
-</div>
-<embed src="tree.svg" style="width: 10cm; height: 13cm;"/>
-<script type="text/javascript">
-SWS.Presentation.registerCallback(0, function (canvas) {
- var svg = canvas.find("embed")[0].getSVGDocument();
- $(svg).find("text").css({ "font-family":"DIN", "font-size":"70%"});
- color(svg, "author", "#ff0000");
- color(svg, "document", "#0000ff");
- color(svg, "book", "#92b938");
- color(svg, "title", "#880088");
-});
-</script>
-</div>
-<div class="sws-slide">
-<h1>XPath : axes</h1>
-<p>Le standard XPath définit un grand nombre d'axes</p>
-<ul>
-<li><a>self</a> : on reste sur le nœud courant</li>
-<li><a>child</a> : tous les fils du nœud courant</li>
-<li><a>parent</a> : le parent du nœud courant. Seul le nœud document
- n'a pas de parent</li>
-<li><a>descendant</a> : les fils, les fils des fils, etc. du nœud courant</li>
-<li><a>ancestor</a> : le parent, et le parent du parent, etc. du nœud
- courant</li>
-<li> <a>descendant-or-self</a>, <a>ancestor-or-seld</a> : comme les
- précédents mais inclus le nœud courant</li>
-<li><a>following-sibling</a>: le frères se trouvant après</li>
-<li><a>preceding-sibling</a>: les frères se trouvant avant</li>
-<li><a>following, preceding, attributes </a> : usage avancé</li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>XPath : les tests</h1>
-<p>On peut sélectionner des nœuds selon les critères suivants</p>
-<ul>
- <li> <a>node()</a> : n'importe quel nœud</li>
- <li> <a>text()</a> : un nœud texte (<tt>"The Lord of the
- Rings"</tt>)</li>
- <li> <a>*</a> : n'importe quel élément
- (<tt>author</tt>, <tt>title</tt>, …)</li>
- <li> <a><i>nom_d_element</i></a> tous les éléments ayant ce nom</li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>XPath : prédicats (syntaxe)</h1>
-<code>
- p ::= p or p
- | p and p
- | not (p)
- | count(…), contains(…), position(), …
- | chemin XPath
- | e<sub>1</sub> op e<sub>2</sub>
-</code>
-<p><tt>e<sub>1</sub></tt> et <tt>e<sub>2</sub></tt> sont des
- expressions arithmétiques, <tt>op</tt> peut être <tt><</tt>, <tt>></tt>, =, !=,
- +, -, *, /, mod, …</p>
-</div>
-<div class="sws-slide">
-<h1>XPath : prédicats (sémantique)</h1>
-<p>On évalue le prédicat et on converti son résultat en valeur de
- vérité. Si la valeur vaut vrai, on garde le nœud courant, si elle
- vaut faux, on ne le garde pas
-</p>
-<p>XPath connait <a>4 types de données</a> pour les prédicats : </p>
-<ul>
-<li>Les booléens, valeur de vérité : vrai ou faux</li>
-<li>Les nombres (flottants), valeur de vérité compliquée… </li>
-<li>Les chaînes de caractères, chaîne vide = faux, sinon vrai</li>
-<li>Les ensembles de nœuds, ensemble vide = faux, sinon vrai </li>
-</ul>
-
-</div>
-<div class="sws-slide">
-<h1>XPath : prédicats (exemples)</h1>
-
-<ul><li> <tt>/descendant::book [ child::title ]</tt> : sélectionne chaque
- élément book pour lequel l'ensemble des fils de nom title n'est
- pas vide </li>
-<li> <tt>/descendant::book [ count(child::author) > 2 ]</tt> : séléctionne
- chaque book qui a plus de deux fils author</li>
-<li> <tt>/descendant::book [ contains(child::title, "Ring") ]</tt></li>
-<li> <code>/descendant::book [ count(child::author) > 2
- or contains(child::author, "Tolk")
- ]/child::title</code></li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Caractéristiques d'XPath</h1>
-<ul>
- <li>XPath est un langage standardisé par le W3C</li>
- <li>Assez verbeux</li>
- <li>Langage de requêtes <a>monadique</a> (on ne peut renvoyer que
- des ensembles de nœuds. Par exemple il est impossible de renvoyer
- des ensembles de paires auteur/titre de livre)</li>
- <li>Il est assez compliqué à implémenter efficacement</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>XPath (suite)</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_02.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 3</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Évaluation des prédicats</h1>
- <div class="sws-slide">
- <h1>Rappels de syntaxe</h1>
-<code>
- p ::= p or p
- | p and p
- | not (p)
- | count(…), contains(…), position(), …
- | chemin XPath
- | e<sub>1</sub> op e<sub>2</sub>
-</code>
-<p>On évalue le prédicat et on converti son résultat en valeur de
- vérité. Si la valeur vaut vrai, on garde le nœud courant, si elle
- vaut faux, on ne le garde pas
-</p>
-<p>XPath connait <a>4 types de données</a> pour les prédicats : </p>
-<ul>
-<li>Les booléens, valeur de vérité : vrai ou faux</li>
-<li>Les nombres (flottants), valeur de vérité compliquée… </li>
-<li>Les chaînes de caractères, chaîne vide = faux, sinon vrai</li>
-<li>Les ensembles de nœuds, ensemble vide = faux, sinon vrai </li>
-</ul>
- </div>
-<div class="sws-slide">
-<h1>Comparaisons (e<sub>1</sub> op e<sub>2</sub>)</h1>
-<p> Les opérateurs de comparaisons sont : <tt>=, !=, <, <=,
- >, >= </tt>.<br/>
- La manière de calculer de vérité de <tt>e<sub>1</sub> op
- e<sub>2</sub></tt> dépend du typed de <tt>e<sub>1</sub></tt>
- et <tt>e<sub>2</sub></tt> :
-</p>
-<ul>
- <li>Si <tt>e<sub>1</sub></tt> et <tt>e<sub>2</sub></tt> représente
- <a>des ensembles de nœuds</a>, alors la comparaison est vraie ssi
- il existe un élément <tt>x</tt> dans <tt>e<sub>1</sub></tt> et un
- élément <tt>y</tt> dans <tt>e<sub>2</sub></tt> tels que <tt>x op y</tt>
- </li>
-
- <li>Si <tt>e<sub>1</sub></tt> représente
- <a>un ensembles de nœuds</a> et <tt>e<sub>2</sub></tt> une valeur
- scalaire <tt>y</tt>, alors la comparaison est vraie ssi
- il existe un élément <tt>x</tt> dans <tt>e<sub>1</sub></tt> tel que <tt>x op y</tt>
- </li>
- <li>Si <tt>e<sub>1</sub></tt> et <tt>e<sub>2</sub></tt> sont des
- valeurs scalaires, alors ont les compare en utilisant les règles de
- comparaison des valeurs scalaires (voir page suivante).
- </li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Comparaisons des valeurs scalaires</h1>
-<code> v<sub>1</sub> op v<sub>2</sub> </code>
-<p>Si op est <tt>!=</tt> ou <tt>=</tt>, on applique les règles dans cet ordre:</p>
-<ol>
-<li> Si <tt>v<sub>1</sub></tt> (resp. <tt>v<sub>2</sub></tt>) est
- un <a>booléen</a>, alors <tt>v<sub>2</sub></tt>
- (resp. <tt>v<sub>1</sub></tt>) est converti en booléen et les deux
- booléens sont comparés </li>
-<li> Sinon si <tt>v<sub>1</sub></tt> (resp. <tt>v<sub>2</sub></tt>) est
- un <a>nombre</a>, alors <tt>v<sub>2</sub></tt>
- (resp. <tt>v<sub>1</sub></tt>) est converti en nombre et les deux
- nombres sont comparés </li>
-<li> Sinon, <tt>v<sub>1</sub></tt> et <tt>v<sub>2</sub></tt> sont des
- <a>chaines de caractères</a>, on les compares</li>
-</ol>
-<p>Si op est <tt> <</tt>, <tt> <=</tt>, <tt> ></tt> ou <tt>
- >=</tt>, on convertit <tt>v<sub>1</sub></tt>
- et <tt>v<sub>2</sub></tt> en <a>nombres</a> et on les compare.
-</p>
-</div>
-<div class="sws-slide">
-<h1>Conversions</h1>
-<p>Conversion en booléen</p>
-<ul>
- <li>0 et NaN sont converti en <tt>false</tt>, le reste
- en <tt>true</tt> </li>
- <li>Un ensemble de nœud vaut <tt>true</tt> ssi il est non vide</li>
- <li>Une chaine vaut <tt>true</tt> ssi elle est non vide</li>
-</ul>
-<p>Conversion en nombre</p>
-<ul>
- <li>Une chaine de caractère représentant un flottant au format
- IEEE-754 est convertie en ce nombre, sinon elle est convertie en NaN
- </li>
- <li>Booléen: <tt>true</tt> est converti à 1, <tt>false</tt> est
- converti à 0</li>
- <li>Un ensemble de nœud est d'abord converti en chaine de caractères
- puis la chaine est convertie en nombre</li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Conversions (suite)</h1>
-<p>Conversion en chaine de caractères</p>
-<ul>
- <li>Un booléen est traduit en <tt>"true"</tt> ou <tt>"false"</tt>
- selon sa valeur</li>
- <li>Nombres:
- <ul><li>NaN est converti en la chaine <tt>"NaN"</tt></li>
- <li>Si le nombre n'a pas de partie décimale, sa
- représentation <i>entière</i> est convertie en chaine (ex:
- 1.000e10 ≡ <tt>"10"</tt>)</li>
- <li>Sinon une représentation IEE-754 du nombre est utilisé
- (ex: <tt>"123.10e-34"</tt>)
- </li>
- </ul>
- </li>
- <li>Ensemble de noœud : <ul>
- <li>L'ensemble vide est converti en la chaine vide
- </li>
- <li>Sinon le premier élément dans l'ordre du document est
- converti en chaine en concatenant tous les nœuds textes dans ces
- descendants (y compris lui-même)</li>
- </ul>
- </li>
-</ul>
-</div>
-
-<div class="sws-slide">
-<h1>Appels de fonction</h1>
-<p>Il existe des fonctions prédéfinies (voir la spec XPath)</p>
-<ul>
- <li><tt>contains(str<sub>1</sub>,str<sub>2</sub>)</tt></li>
- <li><tt>starts-with(str<sub>1</sub>,str<sub>2</sub>)</tt></li>
- <li><tt>count(node_set<sub>1</sub>)</tt></li>
- <li><tt>last()</tt></li>
- <li><tt>position()</tt></li>
- <li>…</li>
-</ul>
-<p>Si les arguments ne sont pas du bon type, ils sont convertis en
- utilisant les règles de conversion</p>
-</div>
-<div class="sws-slide">
-<h1>Exemples</h1>
-<p>Dans la suite, on se donne un document de test ayant une
- racine <tt><![CDATA[<a> ... </a>]]></tt> et une expression XPath qui
- sélectionne la racine si et seulement si le prédicat vaut vrai
-</p>
-</div>
-<div class="sws-slide">
- <h1>Exemples</h1>
- <code> <![CDATA[ <a>
- <b>1</b>
- <c>2</c>
- </a> ]]></code>
-<ol> <li class="sws-pause">
- <tt>/child::a[ child::*/child::text() ]</tt>
- <span class="sws-pause">sélectionne la racine (l'ensemble de nœud
- renvoyé par <tt>child::*/cild::text()</tt> est non vide, donc il est converti
- en <tt>true</tt>)</span><br/><br/></li>
- <li class="sws-pause">
- <tt>/child::a[ child::*/child::text() = "2" ]</tt>
- <span class="sws-pause">sélectionne la racine (l'ensemble de nœud texte
- renvoyé par <tt>child::*/child::text()</tt> est comparé à "2", et
- il existe un élément dans cet ensemble pour lequel le test réussi
- )</span><br/><br/></li>
- <li class="sws-pause"><tt>/child::a[ child::*/child::text() != "2" ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s> (l'ensemble de nœud texte
- renvoyé par <tt>child::*/child::text()</tt> est comparé à "2", et
- il existe un élément dans cet ensemble pour lequel le test réussi
- )</span><br/><br/></li>
- <li class="sws-pause" style="background:white;"><tt>/child::a[ not(child::*/child::text() = "2") ]</tt>
- <span class="sws-pause"><s>ne sélectionne pas la racine</s> (on
- prend la négation du deuxième cas ci-dessus)
- </span><br/><br/></li>
-
-</ol>
-</div>
-<div class="sws-slide">
- <h1>Exemples</h1>
- <code> <![CDATA[ <a>
- <b>1</b><b>2</b>
- <c>2</c><c>3</c>
- </a> ]]></code>
-<ol>
- <li class="sws-pause">
- <tt>/child::a[ child::*/child::text() > 1.5 ]</tt>
- <span class="sws-pause">sélectionne la racine (l'ensemble de nœud texte
- renvoyé par <tt>child::*/child::text()</tt> est comparé à 1.5, et
- il existe un élément dans cet ensemble pour lequel le test réussi
- )</span><br/><br/></li>
- <li class="sws-pause"><tt>/child::a[ child::b/child::text() >= child::c/child::text() ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s> (les deux
- ensembles de nœuds sont convertis en ensmbles de nombres, car on
- utilise <tt>>=</tt> et on a bien que <tt>2 >= 2</tt>
- )</span><br/><br/></li>
- <li class="sws-pause"><tt>/child::a[ child::b/child::text() = child::c/child::text() ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s> (les deux
- ensembles de nœuds comportent un élément commun)</span><br/><br/></li>
- <li class="sws-pause"><tt>/child::a[ child::b/child::text() != child::c/child::text() ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s> (les deux
- comportent des éléments différents)</span><br/><br/></li>
-</ol>
-</div>
-<div class="sws-slide">
- <h1>Exemples</h1>
- <code> <![CDATA[ <a><b>1</b><b>2</b><c>2</c><c>3</c></a> ]]></code>
-<ol>
- <li class="sws-pause">
- <tt>/child::a[ contains(self::*, "22") ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s>(l'ensemble de
- nœud séléctionné par <tt>self::*</tt>, i.e. la racine est converti
- en chaine. Pour ce faire, on colle toutes éléments textes
- descendants et on obtient la chaine "1223" qui contient bien "22")
- </span><br/><br/></li>
- <li class="sws-pause">
- <tt>/child::a[ self::* > 442.38 ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s>(l'ensemble de
- nœud séléctionné par <tt>self::*</tt>, est converti en chaine puis
- en nombre pour comparer 1223 à 442.38)
- </span><br/><br/></li>
-
- <li class="sws-pause">
- <tt>/child::a[ sum(child::*) >= 7.5 ]</tt>
- <span class="sws-pause"><s>sélectionne la racine</s>(la fonction
- <tt>sum</tt> converti la liste de valeurs passée en argument en
- liste de nombre et fait la somme de ces derniers)
- </span><br/><br/></li>
-</ol>
-</div>
-
-<div class="sws-slide">
- <h1>Exemples</h1>
- <code> <![CDATA[ <a><b>1</b><b>toto</b><c>2</c><c>3</c></a> ]]></code>
-<ol>
-
- <li class="sws-pause">
- <tt>/child::a[ sum(child::*) >= 7.5 ]</tt>
- <span class="sws-pause"><s>ne sélectionne pas la racine</s>(la fonction
- <tt>sum</tt> converti la liste de valeurs passée en argument en
- liste de nombres, toto n'étant pas un nombre valide, il est
- remplacé par NaN. La somme totale fait donc NaN, et une
- comparaison avec NaN renvoie toujours faux)
- </span><br/><br/></li>
-</ol>
-</div>
-<div class="sws-slide">
- <h1>Prédicat imbriqués</h1>
- <p>On peut imbriquer des prédicats de manière arbitraire:</p>
- <code> Q<sub>1</sub> ≡ /child::a[ child::b[ count(descendant::c) > 4 ] ] </code>
- <p>Quelle différence avec :</p>
- <code> Q<sub>2</sub> ≡ /child::a[ count(child::b/descendant::c) > 4 ] </code>
- <p class="sws-pause">Il suffit de considérer le document :
- <code> <![CDATA[ <a>
- <b> <c/> <c/> <c/></b>
- <b> <c/> <c/> </b>
- </a>
- ]]></code>
- <tt>Q<sub>1</sub></tt> <s>ne séléctionne rien</s> car il n'y a
- aucun <tt>b</tt> ayant plus de 4
- descendants <tt>c</tt>.<br/> <tt>Q<sub>2</sub></tt> <s>séléctionne</s>
- la racine car le nombre de descendants <tt>c</tt> de
- nœuds <tt>b</tt> est plus grand que 4.
-</p>
-</div>
-<div class="sws-slide">
- <h1><tt>position()</tt> et <tt>last()</tt> </h1>
- <p>La fonction <tt>position()</tt> renvoie la position du nœud au
- sein de <a>l'ensemble de résultats en cours de filtrage</a>. Last
- renvoie le nombre d'éléments dans cet ensemble (ou l'indice du
- dernier élément). Les indices commencent à 1 :</p>
- <code><![CDATA[ <a>
- <b>AA</b>
- <b>BB</b>
- <b>CC</b>
- </a>]]>
-
- /child::a/child::b[ position() = 2 ] (renvoie <![CDATA[<b>BB</b>]]>)
- /child::a/child::b[ position() = last() ] (renvoie <![CDATA[<b>CC</b>]]>)
- /child::a/child::b[ position() mod 2 = 1 ] (renvoie <![CDATA[<b>AA</b>
- <b>CC</b>]]>)
-</code>
-</div>
-<h1>Axes complexes</h1>
-<div class="sws-slide">
- <h1>L'axe <tt>attribute::</tt></h1>
- <p>Permet d'accéder aux attributs d'un élément.<s>Attention</s>, les
- attributs ne font pas partie des fils ni des descendants!</p>
- <code><![CDATA[ <a>
- <b id="a1" v="x" >AA</b>
- <b id="b2" v="y" >BB</b>
- <b id="b3" v="z" >CC</b>
- </a>]]>
-
- /descendant::b[ attribute::* = "y" ] (renvoie <![CDATA[<b …>BB</b>]]>)
- /descendant::b[ attribute::id = "y" ] (ne renvoie rien)
-</code>
-</div>
-<div class="sws-slide">
- <h1>Les axes <tt>preceding::</tt> et <tt>following::</tt></h1>
- <p>L'axe <tt>preceding::</tt> selectionne tous les nœuds arrivant
- avant le nœud courant et qui ne sont pas des ancetres de ce
- dernier.</p>
- <p>L'axe <tt>following::</tt> selectionne tous les nœuds arrivant
- après le nœud courant et qui ne sont pas des descendants de ce dernier.</p>
- <code style="background:white;"><![CDATA[ <a>
- <b > <c/>
- <d> <e/> </d>
- <f ><g/></f>
- </b>
- <h/>
- <i/>
- <j> <k>
- <l/> <m/> <n/>
- </k>
- </j>
- </a>]]>
-
- /descendant::m/preceding::* (séléctionne l, i, h, b, c, d, e, f, g)
- /descendant::d/following::* (sélectionne h, i, j, k, l, m)
-</code>
-</div>
-<div class="sws-slide">
-<h1>Autres opérateurs</h1>
-<p>On peut donner plusieurs prédicats à un chemin :
-<code>
- <s>/descendant::a [ descendant::b ]</s><a>[ position () > 4 ]</a><span style="color:orange;">[ child::c ]</span>
-</code>
-Sélectionne l'ensemble des nœuds <s>A<sub>1</sub> ayant un
- tag <tt>a</tt> et ayant un descendant <tt>b</tt></s>. Filtre
- A<sub>1</sub> pour ne garder que <a>A<sub>2</sub>, l'ensemble des
- nœuds de A<sub>1</sub> étant en position supérieure à
- 4</a>. <span style="color:orange;">Filtre A<sub>2</sub> pour ne
- garder que les nœuds ayant un fils <tt>c</tt></span>.
-</p>
-<p>On peut prendre <a>l'union</a> de plusieurs chemins :</p>
-<code>
- /descendant::a/parent::b | /descendant::c/following-sibling::d
-</code>
-</div>
-<h1>Syntaxe abrégée</h1>
-<div class="sws-slide">
-<h1>Abréviations</h1>
-<p>XPath étant très <a>verbeux</a> il existe une syntaxe abrégée pour
- les situations les plus courantes :</p>
-<ul>
- <li> un nom de tag <tt>foo</tt> est l'abréviation
- de <tt>child::foo</tt>. Exemple : <code> /a/b/c ≡ /child::a/child::b/child::c</code>
- <br/></li>
- <li> un <tt>//</tt> est l'abréviation
- de <tt>/descendant-or-self::node()/</tt>. Exemple :
- <code> //a ≡ /descendant-or-self::node()/child::a </code>
- Prend tous les nœuds du document (y compris le
- nœud fictif <tt>#document</tt> et exécute <tt>child::a</tt> sur
- cet ensemble.<br/></li>
- <li> <tt> .. </tt> est un synonyme
- pour <tt>parent::node()</tt> </li>
- <li> <tt> @foo </tt> est un synonyme pour <tt>attribute::foo</tt>
- </li>
-</ul>
- <p>Exemple :</p>
- <code> //book [ year > 2005 ]/title
- </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>XSLT</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_03.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 4</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Namespaces</h1>
- <div class="sws-slide">
- <h1>Utilisation des <i>namespaces</i></h1>
- <p><a>Problème</a> : comment mélanger au sein d'un même document des
- balises venant de deux DTDs (ou schémas) <a>différentes</a>
- ?<br/>Exemple : mettre du SVG (images vectorielles) dans
- du XHTML (page web)</p>
- <code style="font-size:80%;width:50%;float:left"><![CDATA[
- <svg width="400" height="180">
- <rect x="50"
- y="20"
- rx="20"
- ry="20"
- width="150" height="150"
- style="fill:red;stroke:black;
- stroke-width:5;opacity:0.5" />
- </svg>
- ]]>
- </code>
- <code style="font-size:80%;width:50%;float:left"><![CDATA[
- <html>
- <head><title>Mon image</title></head>
- <body>
-
- <h1>Une image</h1>
- <!-- contenu de l'image -->
-
- </body>
- </html>
- ]]>
- </code>
- <p>Comment spécifier que certains éléments doivent êtres
- <a>interprétés</a> ? (par exemple par le navigateur web) et que
- d'autres font parties des données ?</p>
- </div>
- <div class="sws-slide">
- <h1>L'attribut <tt>xmlns</tt></h1>
- <p>On peut utiliser un <a>attribut</a> spécial, <tt>xmlns</tt>
- qui est autorisé dans <a>tous les documents XML</a>
- sur <a>n'importe quel élément</a>. La valeur de ce dernier est
- un lien identifiant la DTD et indique tous les descendants de
- l'élément en question sont valides par rapport à la
- DTD.<br/>Exemple:
- </p>
- <code style="font-size:80%;background:white;"><![CDATA[
- <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s><![CDATA[>
- <head><title>Mon image</title></head>
- <body>
- <h1>Mon image</h1>
- <svg width="400" height="180" ]]><s>xmlns="http://www.w3.org/2000/svg"</s><![CDATA[>
- <rect x="50"
- y="20"
- rx="20"
- ry="20"
- width="150" height="150"
- style="fill:red;stroke:black;
- stroke-width:5;opacity:0.5" />
- </svg>
- </body>
- </html>
- ]]>
- </code>
-
- </div>
- <div class="sws-slide">
- <h1>L'attribut <tt>xmlns</tt></h1>
- <p>On peut aussi donner <a>un nom</a> à un namespace particulier
- et réutiliser ce nom dans les balises:</p>
- <code style="font-size:80%;background:white;"><![CDATA[
- <html ]]><s>xmlns="http://www.w3.org/1999/xhtml"</s>
- <a>xmlns:svg="http://www.w3.org/2000/svg"</a><![CDATA[>
- <head><title>Mon image</title></head>
- <body>
- <h1>Mon image</h1>
- <svg:svg width="400" height="180"
- <svg:rect x="50"
- y="20"
- rx="20"
- ry="20"
- width="150" height="150"
- style="fill:red;stroke:black;
- stroke-width:5;opacity:0.5" />
- </svg:svg>
- </body>
- </html>]]> </code>
-<p style="background:white;">en utilisant l'attribut <tt>xmlns:toto="..."</tt> alors toutes la
- balises de la forme <tt><toto:nombalise></tt> appartiennent au
- namespace <tt>toto</tt>. Il ne faut pas oublier le namespace sur la
- balise fermante !</p>
- </div>
- <div class="sws-slide">
- <h1>Digression</h1>
- <p>L'exemple précédent ressemble à ça :</p>
- <div style="border: 1pt solid gray;margin: 10pt">
- <h1 style="font-family:Serif;color:black;text-align:left">Mon image</h1>
- <svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
- <rect x="50"
- y="20"
- rx="20"
- ry="20"
- width="150" height="150"
- style="fill:red;stroke:black;
- stroke-width:5;opacity:0.5" />
- </svg>
- </div>
- </div>
- <h1>XSLT, principes</h1>
- <div class="sws-slide">
- <h1>XSLT</h1>
- <p><a>eXtensible Stylesheet Language Transformations</a> : est
- un langage de transformation de documents XML. Il permet
- d'extraire (au moyen d'XPath) des nœuds d'un <a>document d'entrée</a>
- et de les ré-organiser et de les copier dans un <a>document de
- sortie</a>.
- Le document de sortie est souvent du XML lui-même mais peut
- être aussi du texte, du PDF, …
- </p>
- <ul>
- <li>XSLT est standardisé par le W3C</li>
- <li>Les programmes XSLT sont écrit eux-même en XML</li>
- <li>Il existe plusieurs versions du standard (1.0, 2.0,
- 3.0). Ce cours fait juste une introduction aux fonctionalités
- les plus simples (1.0)</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Un exemple simple</h1>
- <p>On réutilise un document de recette de cuisine
- du <a href="xpi_01.xhtml">cours 01</a>. La DTD est:</p>
-<code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
-<!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
-<!ELEMENT title #PCDATA >
-<!ELEMENT ingredients (ingredient+) >
-<!ELEMENT duree #PCDATA >
-<!ELEMENT etapes (e*) >
-<!ELEMENT ingredient #PCDATA>
-<!ELEMENT e #PCDATA>
-<!ATTLIST e num CDATA>
-]]></code>
- </div>
- <div class="sws-slide">
- <h1>Un exemple simple (suite)</h1>
- <p>Un document valide par rapport à la DTD est le suivant</p>
- <code style="color:black;font-size:80%;position:relative;left:10%;"><![CDATA[
-<!DOCTYPE recette SYSTEM "recette.dtd">
-<recette difficulte="facile">
-<title>Tiramisú</title>
-<ingredients>
- <ingredient>mascarpone</ingredient>
- <ingredient>oeufs</ingredient>
- <ingredient>sucre</ingredient>
- <ingredient>café</ingredient>
- <ingredient>biscuits</ingredient>
-</ingredients>
-<duree>2h</duree>
-<etapes>
- <e num="1">Séparer les blancs des jaunes</e>
- <e num="2">…</e>
- …
-</etapes>
-</recette>
-]]></code>
- </div>
-<div class="sws-slide">
- <h1>Un exemple simple (suite)</h1>
- <p>On va extraire des informations du document et en faire une
- page web :</p>
-<code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:template match="/">
- <html>
- <head>
- <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
- </head>
- <body>
- <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
- <ul>
- ]]><u><xsl:for-each select="descendant::ingredient"></u><![CDATA[
- <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
- ]]><u></xsl:for-each></u><![CDATA[
- </ul>
- </body>
- </html>
- </xsl:template>
- </xsl:stylesheet>
-]]></code>
-</div>
-<div class="sws-slide">
-<h1>Comment exécuter un programme XSLT</h1>
-<ul>
- <li>En utilisant un moteur XSLT comment le
- programme <tt>xsltproc</tt> </li>
- <li>En référençant la feuille de style et en ouvrant le document XML
- avec Firefox :
- <code>
- <![CDATA[<!-- fichier recette.xml -->]]>
- <u><?xml-stylesheet type="text/xsl" href="prog.xsl"?></u><![CDATA[
- <recette difficulte="facile">
- <title>Tiramisú</title>
- <ingredients>
- ...]]></code>
- </li>
- <li>En Java grace à la classe <tt>Transformer</tt> du package <tt>javax</tt></li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Structure d'un programme XSLT</h1>
-<p>Un programme XSLT commence par la balise :<code><u><![CDATA[ <xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">]]></u></code>
-et fini par la balise : <code><u><![CDATA[ </xsl:stylesheet>]]></u></code>
-Le texte ainsi que les éléments qui ne sont pas dans
- le <i>namespace</i> « <tt><a>xsl:</a></tt> » sont copiés à
- l'identique dans la sortie.<br/>
- Dans la balise principale <tt><xsl:stylesheet></tt> on trouve
- un certain nombre de balises <u><tt><xsl:template match="…"
- ></tt></u>.<br/>
- Les <i>templates</i> vont jouer le rôle de fonctions et vont être
- appelées pour transformer des nœuds du document en nœuds de sortie.
-</p>
-</div>
-<h1>Les templates XSLT</h1>
-<div class="sws-slide">
- <h1>Templates</h1>
-<p>Un template est délimité par une balise <u><tt><xsl:template match="…"
- ></tt></u> où le « … » est une expression XPath. Il peut y avoir
- plusieurs templates dans un fichier XSLT. <br/>
- Un template est appliqué à un ensemble de nœuds. Parmi cet
- ensemble, tous les nœuds qui vérifient l'expression XPath de
- l'attribut <tt>match</tt> sont passés en argument au template.<br/>
- Initialement, tous les templates existants sont appliqués au nœud
- fictif document.
- </p>
-</div>
-<div class="sws-slide">
- <h1>Retour sur l'exemple</h1>
- <code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:template match="/">
- <html>
- <head>
- <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
- </head>
- <body>
- <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
- <ul>
- ]]><u><xsl:for-each select="descendant::ingredient"></u><![CDATA[
- <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
- ]]><u></xsl:for-each></u><![CDATA[
- </ul>
- </body>
- </html>
- </xsl:template>
- </xsl:stylesheet>
-]]></code>
-<ol><li>Initialement tous les templates (il n'y en a qu'un ici) sont
- appliqués à la racine du document</li>
-<li>Pour chacun d'entre eux, l'expression XPath dans
- le <tt>match</tt> est contrôlée. Si elle réussit, alors le template
- est appliqué au nœud</li>
-</ol>
-</div>
-<div class="sws-slide">
-<h1>Deuxième exemple, 2 templates</h1>
-<p>
- <code style="color:black;font-size:80%;position:relative;"><![CDATA[ <xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:template match="/">
- <html>
- <head>
- <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
- </head>
- <body>
- <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
- <ul>
- ]]><u><xsl:apply-templates select="descendant::ingredient" /></u><![CDATA[
- </ul>
- </body>
- </html>
- </xsl:template>
- <xsl:template match="ingredient">
- <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
- </xsl:template>
- </xsl:stylesheet>]]></code></p>
-<ol style="background:white;"><li>On applique tous les templates à la racine. Le
- template <tt>match="/"</tt> réussit, le
- template <tt>match="ingredient"</tt> échoue.</li>
-<li>L'expression
- <tt><![CDATA[<xsl:apply-templates select="…" />]]></tt>
- réapplique <a>tous</a> les templates à tous les nœuds sélectionnés
- par l'expression XPath.</li>
-</ol></div>
-<div class="sws-slide">
-<h1>Priorité des templates</h1>
-<p>Que se passe-t-il si deux templates peuvent s'appliquer à un même
- élément ? On applique les règles de priorité suivantes
- (simplifiées) :
-</p>
-<ol>
-<li>Si le <tt>match</tt> d'un template contient un <tt>|</tt> entre
- plusieurs chemins, la priorité la plus élevée de ces chemins est choisie
-</li>
-<li>si le <tt>match</tt> est de la forme : <tt>child::foo</tt>
- ou <tt>attribute:foo</tt>, sa priorité est 0 </li>
-<li>si le <tt>match</tt> est de la forme : <tt>child::*</tt> ou
- ou <tt>attribute:*</tt>, sa priorité est -0.25 </li>
-<li>si le <tt>match</tt> est de la form : <tt>child::text()</tt>
- ou <tt>child::node()</tt> (idem avec <tt>attribute</tt>), sa
- priorité est -0.5</li>
-<li>sinon (test complexe, par exemple <tt>foo[ count(child::bar) <
- 4]</tt>), la priorité est 0.5</li>
-</ol>
-<p>Le template ayant la priorité la plus élevée est choisi. On peut
- donner explicitement à un template une priorité avec
- l'attribut <tt>priority="…"</tt><br/>Le moteur XSLT <s>lève une
- erreur</s> d'exécution si deux templates ont exactement la même
- priorité.</p>
-</div>
-<div class="sws-slide">
-<h1>Templates par défaut</h1>
-<p>Il existe 3 templates <a>par défaut</a> qui sont toujours
- définis :</p>
-<code><![CDATA[ <xsl:template match="*|/">
- <xsl:apply-templates/>
- </xsl:template>
-
- <xsl:template match="text()|@*">
- <xsl:value-of select="."/>
- </xsl:template>
-
- <xsl:template match="processing-instruction()|comment()"/>
-]]>
-</code>
-<p>Ils ont des priorités inférieures aux templates présents dans le
- fichier donc ne sont appliqués
- que si aucun templates ne fonctionne. Ils permettent de « descendre
- dans l'arbre » (jusqu'aux textes), si aucun template ne s'applique à
- la racine.
-</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>XSLT (suite)</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_04.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 5</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Structures de contrôle</h1>
- <div class="sws-slide">
- <h1><tt>xsl:value-of</tt> </h1>
- <p>On peut récupérer des nœuds texte dans le document source au
- moyen de la balise <tt><xsl:value-of select="<a>xpath
- expr</a>"/></tt>. L'expression <tt><a>xpath expr</a></tt> est
- évaluée et <a>convertie en chaîne de caractères</a> en suivant
- les conversions d'XPath (voir cours 3).
- </p>
- </div>
- <div class="sws-slide">
- <h1>Itération avec <tt>xsl:for-each</tt></h1>
- <p>La balise <code> <xsl:for-each select="xpath expr">
- <i>corp de boucle</i>
- </xsl:for-each>
-</code> évalue le corp de la boucle pour chaque nœud renvoyé par
- l'expression <tt><a>xpath expr</a></tt>. À chaque itération
- le nœud considéré devient le <a>nœud contexte</a> (i.e. celui
- renvoyé par l'axe <tt>self::</tt>)</p>
- </div>
- <div class="sws-slide">
- <h1>Itération ordonnée <tt>xsl:sort</tt></h1>
- <p>On peut modifier l'ordre dans lequel les éléments sont
- parcourus par une boucle <tt>xsl:for-each</tt> en utilisant
- l'élément <code> <![CDATA[<xsl:sort select="expression"
- lang="language-code"
- data-type="text|number|qname"
- order="ascending|descending"
- case-order="upper-first|lower-first"/>
-]]></code> qui n'est valide que comme fils d'un <tt>xsl:for-each</tt>
- ou <tt>xsl:apply-templates</tt></p>
- <ul>
- <li><tt>select</tt> : expression XPath selon laquelle
- trier</li>
- <li><tt>lang</tt> : code de la <a>locale</a> selon laquelle
- trier (par exemple en français, <tt>é</tt> est
- avant <tt>f</tt>)</li>
- <li><tt>data-type</tt> : types des données triées (text
- (defaut), nombre ou élément XML (ordre du document utilisé
- dans ce cas)</li>
- <li><tt>order</tt> : s'il faut trier en ordre croissant ou
- décroissant</li>
- <li><tt>case-order</tt> : lors d'un tri <a>text</a> si les
- majuscules sont avant les minuscules (defaut) ou inversement</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Conditionnelle simple avec <tt>xsl:if</tt></h1>
- <p>On peut évaluer conditionnellement une portion de code XSLT
- en la plaçant dans une balise:<code><![CDATA[ <xsl:if test="expression">
- ...
- </xsl:if>]]> </code> Le résultat de l'expression est interprété
- comme un booléen (selon les règles de conversion d'XPath). S'il
- vaut vrai, le corp du <tt>xsl:if</tt> est exécuté.</p>
- </div>
- <div class="sws-slide">
- <h1>Conditionnelle complexe avec <tt>xsl:choose</tt></h1>
- <p>On peut écrire plusieurs portions de code, gardées par des
- conditions distinctes
- en les plaçant dans une balise:<code><![CDATA[ <xsl:choose >
- <xsl:when test="cond 1"> code 1</xsl:when>
- <xsl:when test="cond 2"> code 2</xsl:when>
- <xsl:when test="cond 3"> code 3</xsl:when>
- ...
- <xsl:otherwise> code sinon </xsl:otherwise>
- </xsl:choose>]]> </code>
- Les conditions <tt>xsl:when</tt> sont évaluées dans l'ordre et
- le corp de la première valant vrai est exécuté. Si aucune
- condition n'est vérifiée, le corp de
- l'instruction <tt>xsl:otherwise</tt> est exécuté.
- </p>
- </div>
- <div class="sws-slide">
- <h1>Exemple simple (génération d'une page Web)</h1>
- <p>On réutilise (encore) le fichier de recette:</p>
- <code style="color:black;font-size:80%;position:relative;left:10%;"><![CDATA[
-<!DOCTYPE recette SYSTEM "recette.dtd">
-<recette difficulte="facile">
-<title>Tiramisú</title>
-<ingredients>
- <ingredient>mascarpone</ingredient>
- <ingredient>oeufs</ingredient>
- <ingredient>sucre</ingredient>
- <ingredient>café</ingredient>
- <ingredient>biscuits</ingredient>
-</ingredients>
-<duree>2h</duree>
-<etapes>
- <e num="1">Séparer les blancs des jaunes</e>
- <e num="2">…</e>
- …
-</etapes>
-</recette>
-]]></code>
- </div>
- <div class="sws-slide">
- <code style="color:black;font-size:80%;position:relative;left:10%;"><![CDATA[
- <xsl:stylesheet version="1.0"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:template match="/">
- <html>
- <head>
- <title>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </title>
- </head>
- <body>
- <h1>Ingrédients du ]]><u><xsl:value-of select="descendant::title" /></u><![CDATA[ </h1>
- <ul>
- ]]><u><xsl:for-each select="descendant::ingredient"></u>
- <u><xsl:sort select="child::text()" /></u><![CDATA[
- <li> ]]><u><xsl:value-of select="child::text()" /></u><![CDATA[ </li>
- ]]><u></xsl:for-each></u><![CDATA[
- </ul>
- <p>Étape]]><u><xsl:if test="count(descendant::e) &gt;1">s</xsl:if></u><![CDATA[</p>
- <ol>
- ]]><u><xsl:apply-templates select="descendant::e"></u>
- <u><xsl:sort select="@num" data-type="number"/></u>
- <u></xsl:apply-templates></u><![CDATA[
- </ol>
- </body>
- </html>
- </xsl:template>
- <xsl:template match="e">
- <li><xsl:value-of select="."/></li>
- </xsl:template>
- </xsl:stylesheet>
-]]></code>
- </div>
-<h1>Utilisation avancée</h1>
-<div class="sws-slide">
- <h1>Nom d'attributs ou d'éléments dynamiques</h1>
- <p>Il est fréquent de vouloir choisir <a>dynamiquement</a> les noms
- des éléments. Par exemple :</p>
-<code><![CDATA[
- <xsl:choose>
- <xsl:when test="condition"> <b> </xsl:when>
- <xsl:otherwise> <i> </xsl:otherwise>
- </xsl:choose>
-
- .... code complexe pour calculer le texte ....
-
- <xsl:choose>
- <xsl:when test="condition"> </b> </xsl:when>
- <xsl:otherwise> </i> </xsl:otherwise>
- </xsl:choose>]]>
-</code>
-<p class="sws-pause"><s>code incorrect </s>: les balises <tt><b></tt>
-et <tt><i></tt> ne sont pas bien parenthésées</p>
-</div>
-<div class="sws-slide">
-<h1>Solution naïve</h1>
-<p>On peut dupliquer le code de manière à respecter les balises
- ouvrantes/fermantes : </p>
-<code><![CDATA[
- <xsl:choose>
- <xsl:when test="condition">
- <b>
- .... code complexe pour calculer le texte ....
- </b>
- </xsl:when>
- <xsl:otherwise>
- <i>
- .... code complexe pour calculer le texte ....
- </i>
- </xsl:otherwise>
- </xsl:choose>]]>
-</code>
-<p><s>Inélégant et non-maintenable</s> : si on a 10 cas, on copie cole
- 10 fois le code complexe.</p>
-</div>
-<div class="sws-slide">
-<h1>Nom d'attributs ou d'éléments dynamiques</h1>
-<p>On a besoin : </p>
-<ul>
- <li>de pouvoir stocker dans des « variables » le résultat d'une
- expression XSLT</li>
- <li>de pouvoir créer des éléments ou des attributs dont le nom est
- une expression</li>
-</ul>
-<p><s>Problème</s> : XPath ne permet pas de définir des variables</p>
-</div>
-<div class="sws-slide">
- <h1>Variables en XSLT (<tt>xsl:variable</tt>)</h1>
- <p>Comme dans tout langage, on veut pouvoir évaluer <a>une
- expression</a> et donner un <a>nom</a> au <a>résultat</a> pour
- pouvoir le réutiliser plusieurs fois. En XSLT, on utilise la
- balise <tt>xsl:variable</tt> :</p>
-<code><![CDATA[
- <xsl:variable name="result" select="count(descendant::foo)" />
-
- Le document contient <xsl:value-of select="$result" /> éléments foo.
-]]></code>
-<ul>
- <li>L'attribut <tt>name</tt> est obligatoire et permet de définir le
- nom de la variable</li>
- <li>L'attribut <tt>select</tt> s'il est présent permet de définir le
- contenu</li>
- <li>Au sein d'une expression XPath, on peut utiliser la
- notation <tt>$x</tt> pour référencer le contenu de la
- variable <tt>x</tt></li>
-</ul>
-</div>
-<div class="sws-slide">
-<h1>Définitions complexes de variables</h1>
-<p>On peut aussi donner du contenu à l'élément <tt>xsl:variable</tt>,
- pour définir la valeur de la variable : </p>
-<code><![CDATA[
- <xsl:variable name="result">
- <xsl:choose>
- <xsl:when test="…condition…">b</xsl:when>
- <xsl:otherwise>i</xsl:otherwise>
- </xsl:choose>
- </xsl:variable>]]>
-</code>
-</div>
-<div class="sws-slide">
-<h1>Portée des variables</h1>
-<p>Les variables sont <s>non-modifiables</s> une fois définies. Elles
- sont visibles par tous les éléments suivant la balise
- fermante <tt></xsl:variable></tt> se trouvant avant la
- fermeture de l'élément contenant la variable. Exemple : </p>
-<code style="background:white;"><![CDATA[
-<xsl:template match="x">
- <xsl:variable name="total" select="count(descendant::text())" />
- <!-- la variable total est visible à partir d'ici et
- jusqu'au </xsl:template> -->
-
-
- <xsl:for-each select="descendant::text()">
- <p>texte <xsl:value-of select="position()" /> sur
- <xsl:value-of select="$total" /> :
- <xsl:value-of select="." />
- </p>
- </xsl:for-each>
-
-</xsl:template>]]>
-</code>
-</div>
-<div class="sws-slide">
-<h1>Création dynamique d'éléments ou d'attributs</h1>
-<p>On peut utiliser les instructions <tt>xsl:element</tt>
- et <tt>xsl:attribute</tt> pour créer des éléments et des attributs
- dont le nom est calculé dynamiquement :
-</p>
-<code><![CDATA[
- <xsl:element name="foo">
- <xsl:attribute name="bar">baz</xsl:attribute>
- ...
- </xsl:element>
-]]></code>
-<p>produira dans le document de sortie :</p>
-<code><![CDATA[ <foo bar='baz'>
- ...
- </foo>
-]]></code>
-</div>
-<div class="sws-slide">
- <h1>Échappement d'expressions XPath dans les chaînes</h1>
- <p>À part les attributs <tt>select</tt> et <tt>test</tt> de
- certaines balises XSLT, les autres attributs sont <s>des chaines de
- caractères</s>. On peut cependant intégrer des expressions XPath au
- moyen d'accolades <tt>{ }</tt>
- </p>
- <code><![CDATA[
- <a href="descendant::url/child::text()">Le site!</a>]]>
- </code>
- <p>Dans le code ci-dessus, <tt>href</tt> étant un attribut non
- interprété (ce n'est pas une balise XSLT), le chemin XPath
- apparaîtra dans le résultat (ce qu'on ne veut pas). On peut écrire
- :</p>
- <code><![CDATA[
- <a href="{descendant::url/child::text()}">Le site!</a>]]>
- </code>
-</div>
-<div class="sws-slide">
-<h1>Retour sur notre exemple</h1>
-<code><![CDATA[
- <xsl:variable name="nombalise">
- <xsl:choose>
- <xsl:when test="condition">b</xsl:when>
- <xsl:otherwise>i</xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
-
- <xsl:element name="{$nombalise}">
- .... code complexe pour calculer le texte ....
- </xsl:element>
-]]></code>
-<p><s>Attention</s> : il faut écrire <tt>{$nombalise}</tt> sinon le
- processeur XSLT essayera de créer un
- élément <tt><$nombalise></tt> ce qui est illégal (et
- provoquera une erreur)</p>
-</div>
-<h1>Autres fonctionalités</h1>
-<div class="sws-slide">
-<h1>Spécifier le type de sortie</h1>
-<p>On peut placer une balise <tt>xsl:output</tt> dans la balise racine
- de la feuille de style (<tt>xsl:stylesheet</tt>)</p>
-<code ><![CDATA[ <xsl:output
- method="xml|html|text"
- cdata-section-elements="namelist"
- indent="yes|no"
- />
-]]></code>
-<ul><li><tt>method</tt> : décrit le type de fichier généré (XML
- (defaut), HTML (plus permissif sur les balises non fermées),
- texte)</li>
- <li><tt>cdata-section-elements</tt> : liste de nom de balises
- séparées par des espaces. Dans ces balises, le contenu du texte
- n'est pas interprété (<tt>></tt>, <tt><</tt> peuvent êtres
- écrits directement)</li>
- <li><tt>indent</tt> : si la sortie est du XML, indenter les balises
- de manière lisible</li>
-</ul>
-</div>
-<div class="sws-slide">
- <h1>Copie de texte et de nœuds </h1>
- <ul>
- <li>La balise <tt><xsl:copy-of select='expression'></tt>
- copie le résultat de l'expression XPath (qui peut être un nœud)
- dans la sortie, avec ses attributs et son contenu</li>
- <li>La balise <tt><xsl:text> ... </xsl:text></tt>
- copie le texte tel quel (sans toucher aux blancs) dans la sortie</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>DOM</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_05.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 6</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Le modèle DOM</h1>
- <div class="sws-slide">
- <h1>Programmer avec XML</h1>
-<p>La représentation textuelles de documents XML n'est pas
- adaptée à la manipulation des données par un programme : </p>
-<ul>
- <li>On ne veut pas lire le fichier « caractère par caractère » </li>
- <li>On veut s'assurer que le fichier est bien formé et valide </li>
- <li>On veut pouvoir manipuler la structure d'arbre que représente le
- fichier </li>
-</ul>
-
- </div>
- <div class="sws-slide">
- <h1>Document Object Model</h1>
- <p>DOM est une <a>spécification</a> du W3C qui
- explique <a>comment</a> représenter un document dans un
- langage <a>orienté objet</a>.<br/>Avantages :
- </p>
- <ul>
- <li>N'est pas limité à un seul langage</li>
- <li>Permet de spécifier une API unique : programmer en XML en
- Java ou Python ne sera pas différent</li>
- </ul>
- <p>Inconvénivents :</p>
- <ul>
- <li>En pratique, orienté Java</li>
- <li>Se focalise sur les lanages objets de manière arbitraire</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Que définit le DOM ?</h1>
- <p>Le DOM définit des <a>interfaces</a> (c'est à dire, <a>des noms
- de classes</a> auquels sont associés
- des <a>propriétés</a>). Il définit aussi des types de bases
- (chaînes de caractères, entiers, etc.) et des types
- auxiliaires qui sont implantés par les types de bases du
- langage.
- </p>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Node</tt> (1/4, constantes) </h1>
- <code>
- //attention ce n'est pas du Java
- interface <a>Node</a> {
-
- //constantes entières définissant les types de nœuds
- const unsigned short <a>ELEMENT_NODE</a> = 1;
- const unsigned short <a>ATTRIBUTE_NODE</a> = 2;
- const unsigned short <a>TEXT_NODE</a> = 3;
- const unsigned short <a>CDATA_SECTION_NODE</a> = 4;
- const unsigned short <a>ENTITY_REFERENCE_NODE</a> = 5;
- const unsigned short <a>ENTITY_NODE</a> = 6;
- const unsigned short <a>PROCESSING_INSTRUCTION_NODE</a> = 7;
- const unsigned short <a>COMMENT_NODE</a> = 8;
- const unsigned short <a>DOCUMENT_NODE</a> = 9;
- const unsigned short <a>DOCUMENT_TYPE_NODE</a> = 10;
- const unsigned short <a>DOCUMENT_FRAGMENT_NODE</a> = 11;
- const unsigned short <a>NOTATION_NODE</a> = 12;
-
-
- </code>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Node</tt> (2/4, valeur, nom et type) </h1>
-
-
- <code>
- //nom et valeur du nœud
-
- readonly attribute DOMString <a>nodeName</a>;
- attribute DOMString <a>nodeValue</a>;
- </code>
- <ul>
- <li>Pour les éléments <tt>nodeValue</tt> vaut <tt>null</tt>
- et <tt>nodeName</tt> est le nom de la balise
- </li>
- <li>Pour les nœuds texte <tt>nodeValue</tt> est le texte
- et <tt>nodeName</tt> est la chaine fixe <tt>#text</tt>
- </li>
- <li>Pour les attributs <tt>nodeValue</tt> vaut la valeur de
- l'attribut et <tt>nodeName</tt> est son nom
- </li>
- </ul>
- <code>
- //L'une des 12 constantes du slide précédent
- readonly attribute unsigned short <a>nodeType</a>;
- </code>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Node</tt> (3/4, navigation) </h1>
- <code>
- readonly attribute Node <a>parentNode</a>;
- readonly attribute NodeList <a>childNodes</a>;
- readonly attribute Node <a>firstChild</a>;
- readonly attribute Node <a>lastChild</a>;
- readonly attribute Node <a>previousSibling</a>;
- readonly attribute Node <a>nextSibling</a>;
- readonly attribute NamedNodeMap <a>attributes</a>;
- </code>
- <p>Utilise deux interfaces auxiliaires:</p>
- <code>
- interface NodeList {
- Node <a>item(in unsigned long index)</a>;
- readonly attribute unsigned long <a>length</a>;
- };
- interface NamedNodeMap {
- Node <a>getNamedItem(in DOMString name)</a>;
- …
- }
- </code>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Node</tt> (4/4, mise à jour) </h1>
- <code>
- //Renvoie le document auquel appartient le nœud
- readonly attribute Document <a>ownerDocument</a>;
-
- Node <a>insertBefore(in Node newChild,
- in Node refChild)
- raises(DOMException)</a>;
-
- Node <a>replaceChild(in Node newChild,
- in Node oldChild)
- raises(DOMException)</a>;
- Node <a>removeChild(in Node oldChild)
- raises(DOMException)</a>;
- Node <a>appendChild(in Node newChild)
- raises(DOMException)</a>;
- boolean <a>hasChildNodes()</a>;
-
- //Nécessaire pour copier un nœud d'un document dans un autre
- Node <a>cloneNode(in boolean deep)</a>;
- </code>
- </div>
- <div class="sws-slide">
- <h1>Sous-interfaces de <tt>Node</tt></h1>
- <p>L'interface <tt>Node</tt> est spécialisées en 12
- sous-interfaces différents (les 12 types de nœuds
- possibles). Les principales sont:
- </p>
- <ul>
- <li><a><tt>Document</tt></a> : l'interface du nœud « racine » du
- document </li>
- <li><a><tt>Element</tt></a> : l'interface des nœuds
- correspondant à des balises</li>
- <li><a><tt>Attr</tt></a> : l'interface des nœuds
- correspondant à des attributs</li>
- <li><a><tt>Text</tt></a> : l'interface des nœuds
- correspondants à des textes </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Text</tt></h1>
- <code>
- interface Text : Node {
- //renvoie vrai si le nœud ne contient que des espaces
- readonly attribute boolean <a>isElementContentWhitespace</a>;
- …
- }
- </code>
- <p>(La spécification de DOM mentionne d'autres propriétés)</p>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Attr</tt></h1>
- <code>
- interface Attr : Node {
- readonly attribute DOMString <a>name</a>;
- readonly attribute DOMString <a>value</a>;
-
- readonly attribute Element <a>ownerElement</a>;
- …
- };
- </code>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Element</tt></h1>
- <code>
- interface Element : Node {
- readonly attribute DOMString <a>tagName</a>;
- //manipulation par chaine :
- DOMString <a>getAttribute(in DOMString name)</a>;
- void <a>setAttribute(in DOMString name,
- in DOMString value)
- raises(DOMException)</a>;
-
- void <a>removeAttribute(in DOMString name)
- raises(DOMException)</a>;
-
- //manipulation par nœud :
- Attr <a>getAttributeNode(in DOMString name)</a>;
- Attr <a>setAttributeNode(in Attr newAttr)
- raises(DOMException)</a>;
- Attr <a>removeAttributeNode(in Attr oldAttr)
- raises(DOMException)</a>;
-
- //renvoie tous les descendants avec un certain tag
- NodeList <a>getElementsByTagName(in DOMString name)</a>;
-
- }
- </code>
- </div>
- <div class="sws-slide">
- <h1>L'interface <tt>Document</tt></h1>
- <code>
- inteface Document : Node {
- //L'élément racine
- readonly attribute Element <a>documentElement</a>;
-
- //Création de nœuds pour ce document :
-
- Element <a>createElement(in DOMString tagName)
- raises(DOMException)</a>;
- Text <a>createTextNode(in DOMString data)</a>;
- Attr <a>createAttribute(in DOMString name)
- raises(DOMException)</a>;
-
- //Les descendants avec un tag particulier
- NodeList <a>getElementsByTagName(in DOMString tagname)</a>;
-
-
- //Copie un nœud, éventuellement avec ses descendants et
- //en fait un nœud ajoutable au document :
- Node <a>importNode(in Node importedNode,
- in boolean deep)</a>;
- </code>
- </div>
- <div class="sws-slide">
- <h1>Modèle mémoire</h1>
- <p>Un <a>nœud</a> (objet implémentant l'interface <tt>Node</tt>)
- ne peut pas appartenir à deux documents. Exemple : </p>
- <code>
- Node noeud_a = document1.getElementByTagName("a").item(0);
-
- <s>document2.appendChild(noeud_a);</s>//Exception si document2 n'est
- //pas le même objet que
- document1
- //par contre ceci est ok:
- document2.appendChild(<a>document2.importNode</a>(noeud_a, true));
- </code>
- </div>
- <h1>Java API for XML Processing</h1>
- <div class="sws-slide">
- <h1>Introduction à JAXP</h1>
- <p>API de la bibliothèque standard Java qui permet de manipuler
- du XML. Elle comprend (entre autres) :</p>
- <ul>
- <li>Lecture et écriture de documents <a>en streaming</a>
- (cours 7)</li>
- <li>Implémentation complète de la
- spécification <a>DOM</a></li>
- <li>Moteur XSLT (et donc XPath)</li>
- </ul>
- <p>Inconvénients : la bibliothèque essaye d'être très générique,
- afin que n'importe qui puisse fournir son implémentation de DOM
- en utilisant les interfaces fournies. Il faut donc parfois
- passer par des grandes séquences d'incatations magiques pour
- créer un objet</p>
- </div>
- <div class="sws-slide">
- <h1>Structure de l'API</h1>
- <ul>
- <li>Les types et interfaces spécifiés par le w3C se trouvent
- dans le packages <tt>org.w3c.*</tt> </li>
- <li>Les types « usuels» pour XML sont
- dans <tt>org.xml.*</tt></li>
- <li>Les <a>classes</a> concrètes java implémentant les
- interfaces sont dans <tt>javax.xml.*</tt></li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1><tt>Factory</tt> <i>design pattern</i></h1>
- <p>Comme toutes les API complexes en Java (et dans les langages
- objets en général), Jaxp utilise le <i>design pattern</i>
- de <a>Factory</a>. </p>
- <p>Pour créer un objet de type <tt>Foo</tt> on ne fait pas
- simplement <tt>new Foo(…);</tt> mais on utilise une
- classe <tt>FooFactory</tt> qui possède une
- méthode <tt>.createFoo(…)</tt>
- </p>
- <p >Dans quel cas est-ce intéressant ?</p>
- <p class="sws-pause">Quand <tt>Foo</tt> est une interface. On
- ne peut pas faire <tt>new</tt> sur une interface. Il faut donc
- une méthode pour appeler le constructeur de la classe
- implémentant <tt>Foo</tt> puis qui le caste en <tt>Foo</tt> … </p>
-
- </div>
- <div class="sws-slide">
- <h1><tt>Factory</tt> <i>design pattern</i> (exemple) </h1>
- <img style="margin-left:10%;width:80%" src="factory_pattern_uml_diagram.jpg" />
- </div>
- <div class="sws-slide">
- <h1>Création d'un document : <tt>DocumentBuilder</tt></h1>
- <p>La classe <tt>DocumentBuilder</tt> permet de créer un
- document XML : </p>
- <ul><li>Soit en le lisant depuis un fichier (avec la
- méthode <tt>parse()</tt></li>
- <li>Soit vide, avec la méthode <tt>newDocument()</tt></li>
- </ul>
- <p>Pour obtenir un <tt>DocumentBuidler</tt>, il faut passer par
- un <tt>DocumentBuilderFactory</tt> : </p>
- <code>
- //création de la Factory
- DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
-
- //On définit quelques options
- dbf.setIgnoringElementContentWhitespace(true); // option
- dbf.setValidating(false); // option
-
- //On crée le documentBuilder
- DocumentBuilder db = dbf.newDocumentBuilder();
-
- //On charge le document
- Document doc = db.parse("fichier.xml");
- </code>
- </div>
- <div class="sws-slide">
- <h1>DOM dans JAXP</h1>
- <p>Le <tt>DocumentBuilder</tt> permet d'obtenir
- un <tt>Document</tt> (interface Java qui implémente l'interface DOM
- du même nom)</p>
- <p><a>Conventions de nommage :</a> les <i>propriétés</i> des
- interfaces DOM sont préfixées par <tt>get</tt> ou <tt>set</tt>
- en Java. Les méthodes ont le même nom. Exemple :</p>
- <code>
- Node n = …;
- n.getNodeType(); //DOM défini nodeType;
- n.getFirstChild(); //DOM défini firstChild;
- n.appendChild(m); //C'est une méthode en DOM donc même nom
- </code>
- </div>
- <div class="sws-slide">
- <h1>Conversions</h1>
- <p>On travaille la plupart du temps avec des objets ayant le
- type <tt>Node</tt>. La manière correcte de les convertir est la
- suivante :
- </p>
- <code>
- switch (n.getNodeType()) {
-
- case Node.DOCUMENT_NODE:
- Document d = (Document) n;
- …
- break;
- case Node.ELEMENT_NODE:
- Element e = (Element) n;
- …
- break;
- case Node.TEXT_NODE:
- Text t = (Text) n;
- …
- break;
- }
- </code>
- </div>
- <div class="sws-slide">
- <h1>Rappels : classes et interfaces utiles en Java</h1>
- <p> Interface <tt>Map<K,V></tt> permet d'associer des
- clés de types <tt>K</tt> à des valeurs de type <tt>V</tt>
- (<tt>K</tt> et <tt>V</tt> doivent être des <tt>Objects</tt> donc
- pas <tt>int</tt>, <tt>bool</tt> , …)</p>
- <p>Implémentations possibles
- : <tt>TreeMap</tt>, <tt>HashMap</tt></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>XPath et XSLT en Java</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_06.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 7</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Requêtes XPath en Java</h1>
- <div class="sws-slide">
- <h1>Moteur XPath en java</h1>
- <p>L'API JAXP contient un moteur XPath 1.0 complet. Outre les
- classes nécessaires au chargement de fichier et à la
- manipulation du DOM (voir cours 6), il faut charger les éléments
- du package <a><tt>javax.xml.xpath</tt></a>. Comme pour le reste
- de JAXP, on passe par un <tt>XPathFactory</tt> pour créer une
- nouvelle instance du moteur XPath.
- </p>
- </div>
- <div class="sws-slide">
- <h1>Exemple : packages</h1>
- <code style="background:white;"> //Pour les documents et DOM
- <kbd>import org.w3c.dom.*;
- import javax.xml.namespace.QName;
- import javax.xml.parsers.DocumentBuilder;
- import javax.xml.parsers.DocumentBuilderFactory;</kbd>
-
- //Pour le moteur XPath
- <u>import javax.xml.xpath.XPathFactory;
- import javax.xml.xpath.XPath;
- import javax.xml.xpath.XPathConstants;</u>
-
- <kbd>public class TestXPath {</kbd>
- //Deux attributs pour contenir le moteur XPath et le document builder
- <kbd>XPath xp_ = null;
- DocumentBuilder db_ = null;</kbd>
-
- </code>
- </div>
- <div class="sws-slide">
- <h1>Exemple : constructeur</h1>
- <code style="background:white;"> <kbd>public TestXPath () {
- try {
- DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
- factory.setNamespaceAware(true);
- db_ = factory.newDocumentBuilder();
-
- <u>XPathFactory xf = XPathFactory.newInstance();
- xp_ = xf.newXPath();</u>
-
- } catch (Exception e) {</kbd>
- //Peuvent être levées en cas d'erreur de création d'objet XPath
- //DocumentBuilder, par exemple si des options passées sont
- //non-supportées.
-<kbd> }
- }</kbd>
-
- </code>
- </div>
-<div class="sws-slide">
- <h1>Exemple : méthode d'évaluation</h1>
- <code style="background:white;">
- <kbd>NodeList eval(String fichier, String chemin) throws Exception {
-
- </kbd>//Création d'un DOM pour le fichier source<kbd>
- Document doc = db_.parse(fichier);
-
- <u>NodeList nl = (NodeList) xp_.evaluate(chemin,
- doc,
- XPathConstants.NODESET);</u>
-
-
- }</kbd>
-
-</code>
-</div>
-<div class="sws-slide">
- <h1>Méthode <tt>XPath.evaluate()</tt></h1>
-<p>La méthode <tt>XPath.evaluate(xpath, n, type)</tt> permet d'évaluer une
- l'expression <a>xpath</a> (donnée sous-forme de chaîne de
- caractères), à partir du nœud contexte <tt>n</tt> (qui doit
- implémenter l'interface <a>Node</a>). Le résultat est de
- type <a>typ</a>. La fonction renvoie un résultat de
- type <s>Object</s>. L'argument <tt>typ</tt> peut avoir 5 valeurs
- possibles, définies dans la class <tt>XPathConstants</tt> :
-</p>
-<ul>
- <li><tt><u>XPathConstants.BOOLEAN</u></tt>: le résultat est de type java <tt>Boolean</tt></li>
- <li><tt><u>XPathConstants.NUMBER</u></tt>: le résultat est de type java <tt>Double</tt></li>
- <li><tt><u>XPathConstants.STRING</u></tt>: le résultat est de type java <tt>String</tt></li>
- <li><tt><u>XPathConstants.NODE</u></tt>: le résultat est de type java <tt>Node</tt></li>
- <li><tt><u>XPathConstants.NODESET</u></tt>: le résultat est de type java <tt>NodeList</tt></li>
-</ul>
-<p>En effet, une expression XPath peut avoir comme valeur un booléen,
- un ensemble de noeuds ou une chaîne dépendant du <s>contexte</s> où
- elle est utilisée. On peut demander à Jaxp d'évaluer la requête
- XPath pour un certain contexte.
-</p>
-</div>
- <div class="sws-slide">
- <h1>Exemple </h1>
- <code><kbd> Document doc = ...
- String chemin = <u>"//descendant::year[position () = 1]";</u>
-
-
- </kbd>//Crée une NodeList à un élément<kbd>
- <u>NodeList nl = (NodeList) xp_.evaluate(chemin, doc, XPathConstants.NODESET);</u>
-
- </kbd>//Renvoie le nœud correspondant ou null<kbd>
- <u>Node n = (Node) xp_.evaluate(chemin, doc, XPathConstants.NODE);</u>
-
- </kbd>//Renvoie le double java correspondant à la valeur<kbd>
- <u>Double d = (Double) xp_.evaluate(chemin, doc, XPathConstants.NUMBER);</u>
-
- </kbd>//Renvoie la chaine java correspondant au texte<kbd>
- <u>String s = (String) xp_.evaluate(chemin, doc, XPathConstants.STRING);</u>
-
- </kbd>//Renvoie la valeur de vérité corresondant au chemin<kbd>
- <u>Boolean b = (Boolean) xp_.evaluate(chemin, doc, XPathConstants.BOOLEAN);</u>
-</kbd></code>
-</div>
-<div class="sws-slide">
-<h1>La classe <tt>XPathExpression</tt></h1>
-<p>Cette classe est similaire à l'utilisation
- de <a>PreparedStatements</a> en JDBC.<br/>
-<span class="sws-pause">Utilité ?</span>
-<span class="sws-pause">compiler la requête XPath une fois pour toute
- et donc éviter de re-parser la chaîne de caractère à chaque
- appel. <br/>Exemple : </span>
-</p>
-<code>
-<kbd> <u>XPathExpression ex = xp_.compile("//movie/title");</u>
-
- NodeList nl1 = (NodeList) ex.evaluate(doc1, XPathConstants.NODESET);
- NodeList nl2 = (NodeList) ex.evaluate(doc2, XPathConstants.NODESET);
- NodeList nl3 = (NodeList) ex.evaluate(doc3, XPathConstants.NODESET);
- …
-</kbd></code>
-
-</div>
-<h1>XSLT</h1>
-<div class="sws-slide">
-<h1> Applications de transformations XSLT </h1>
-<p>Appliquer une transformation XSLT est une opération complexe à
- cause des différentes combinaisons possibles :
-</p>
-<ul>
-<li>Le fichier source (ex: <tt>movie.xml</tt>) peut être soit déjà
- chargé comme un <tt>DOM</tt>, soit sous forme de fichier, soit sous
- forme de chaîne de caractères,…</li>
-<li>Le fichier destination (ex: <tt>resultat.xhtml</tt>) est
- représenté par une <tt>DOM</tt> qui doit être
- éventuellement <i>sérialisé</i> (i.e. retransformé en fichier XML).
-</li>
-<li>La transformation elle même (ex: <tt>style.xsl</tt>) peut être
- sous forme diverse (fichier, URL, DOM, …)
-</li>
-<p>On a donc une série de classes d'encapsulation (<tt>Source</tt>,
- …), de factory, …</p>
-</ul>
-
-
-</div>
-<div class="sws-slide">
-<h1>Création d'une transformation</h1>
-<p>Pour créer une transformation XSLT, il faut les classes suivantes,
- du package: <tt>javax.xml.transform</tt></p>
-<code>
- //La classe permettant d'appliquer une transformation XSLT
- //ainsi que sa factory
- <u>import javax.xml.transform.Transformer;
- import javax.xml.transform.TransformerFactory;</u>
-
- //La classe permettant de charger des transformations ou des
- //arguments de transformation sous forme de fichiers
- <u>import javax.xml.transform.stream.StreamSource;</u>
-
- //La classe permettant de charger des documents ou transformations
- //sous forme de nœuds DOM
- <u>import javax.xml.transform.dom.DOMSource;</u>
-
-</code>
-</div>
-
-<div class="sws-slide">
- <h1>Exemple</h1>
-
-<code>
- <u>TransformerFactory tf = TransformerFactory.newInstance();</u>
- //On crée un StreamSource à partir d'un nom de fichier contenant
- //la feuille de style XSLT
- <u>Transformer tr = tf.newTransformer(new StreamSource("style.xsl"));</u>
-</code>
-
-<p>Le code ci-dessus crée un objet de type <tt>Transformer</tt>
- représentant la transformation XSLT se trouvant dans le fichier
- <tt>style.xsl</tt>. <br/>
- Si on avait chargé le fichier sous forme d'un
- arbre DOM:
-</p>
-<code> <kbd>Document style_xsl = … ;</kbd>//chargement de style.xsl
-
- <u>TransformerFactory tf = TransformerFactory.newInstance();</u>
- <u>Transformer tr = tf.newTransformer(new DOMSource(style_xsl));</u>
-
-</code>
-
-</div>
-<div class="sws-slide">
-<h1>La méthode <tt>Transformer.transform()</tt></h1>
-<code> transform(<u>Source</u> xmlSource, <u>Result</u> outputTarget)
-</code>
-<p>Les interfaces <tt>Source</tt> et <tt>Result</tt> permettent
- d'abstraire le type de l'entrée et de la sortie. Ces dernières
- peuvent être :</p>
-<ul>
- <li>Des objets DOM : <u>DOMSource</u> et <u>DOMResult</u> </li>
- <li>Des objets d'entrée sortie de la bibliothèque java standard
- (<tt>File</tt>, <tt>Input/OutputStream</tt>, <tt>Reader/Writer</tt>,
- chaîne de caractère représentant un nom de fichier
- : <u>StreamSource</u> et <u>StreamResult</u></li>
-</ul>
-
-</div>
-<div class="sws-slide">
-<h1>Exemple</h1>
-<code>
- //On applique le transformer associé à style.xsl
- //sur le fichier movie et on écrit le résultat sur
- //la sortie standard :
-
- <u>tr.transform(new StreamSource("movies.xml"), new StreamResult(System.out));</u>
-</code>
-</div>
-<div class="sws-slide">
- <h1>Sérialisation</h1>
- <p>La manière la plus simple de <i>sérialiser un document</i> est de
- créer une transformation XSLT vide (i.e qui fait l'identité) et de
- demander à ce que le résultat soit un fichier (ou la sortie
- standard)</p>
- <code>
- <kbd>Document doc = …; </kbd>//l'objet DOM que l'on veut sauver dans un fichier
- <u>Transformer tr = tf.newTransformer();</u>
- <u>tr.transform(new DOMSource(doc),</u>
- <u>new StreamResult(new FileOutputStream("fichier.xml")));</u>
- </code>
-</div>
-<h1><i>Streaming</i> avec SAX</h1>
-<div class="sws-slide">
- <h1><i>Streaming</i> ?</h1>
- <p>Charger un document avec DOM permet d'accéder à l'arbre « en
- entier » mais peut être couteux en mémoire (chaque nœud possède au
- moins 4 pointeurs, 2 chaines de caractères, …). On veut pouvoir
- effectuer certains types d'opération à la volée :
- </p>
- <ul class="sws-pause">
- <li class="sws-pause">Faire des statistiques sur les documents (compter le nombre
- d'éléments, d'attributs, …)</li>
- <li class="sws-pause">Faire des transformations simples qui
- préservent la structure (par exemple mettre les balises en
- majuscules)</li>
- <li class="sws-pause">Valider vis à vis d'une DTD</li>
- </ul>
-</div>
-<div class="sws-slide">
-<h1>Programmation évènementielle</h1>
-<p>Les parseurs SAX (Simple API for XML) reposent sur la programmation
- évènementielle. Ils lisent le fichier d'entrée et génèrent un
- certain nombre d'évènements, auxquels on peut réagir avec du code.
- Les évènements sont :
-</p>
-<ul>
- <li>Début de document</li>
- <li>Fin de document </li>
- <li>Ouverture de balise (avec le nom et la liste des attributs)</li>
- <li>Fermeture de balise (avec le nom)</li>
- <li>Élément texte</li>
- <li>Commentaire </li>
- <li>…</li>
-</ul>
-</div>
-<div class="sws-slide">
- <h1>L'API SAX</h1>
-<code>
-import javax.xml.parsers.*;
-import org.xml.sax.*;
-import org.xml.sax.helpers.*;
-</code>
-<p>On doit étendre la classe par <tt>DefaultHandler</tt></p>
-</div>
-<div class="sws-slide">
-<h1><tt>DefaultHandler</tt></h1>
-<code>
- //le parseur a lu length caractères qui se trouvent dans
- //ch à partir de la position start
- void <u>characters</u>(char[] ch, int start, int length)
-
- //le parseur a détécté la fin de document
- void <u>endDocument</u>()
-
- //le parseur a détecté la fin d'un élément
- void <u>endElement</u>(String uri, String localName, String qName)
-
- //le parseur a détecté du texte « ignorable »
- void <u>ignorableWhitespace</u>(char[] ch, int start, int length)
-
- //le parseur a détecté le début du document
- void <u>startDocument</u>()
- //le parseur a detecté le début d'un élément
- void <u>startElement</u>(String uri,String localName, String qName,
- Attributes attributes)
-</code>
-<p><tt><u>Attributes</u></tt> est une classe auxiliaire qui permet de
- connaître le nom, le nombre et les valeurs des attributs pour cette
- balise.</p>
-</div>
-
-<div class="sws-slide">
-<h1><tt>Handler</tt> personnalisé</h1>
-<p>On étend la classe <tt>DefaultHandler</tt> : </p>
-<code>
-<u>class MyHandler extends DefaultHandler</u> {
- private int nb_elems;
- MyHandler() {
- nb_elems = 0;
- }
- void <u>startElement</u>(String uri,String localName, String qName,
- Attributes attributes)
- throws SAXException {
- nb_elems++;
-
- }
- int getNbElems() { return nb_elems; };
-}
-
-</code>
-
-</div>
-<div class="sws-slide">
-<h1>Invocation du parseur</h1>
-<p>On utilise (encore) une factory : </p>
-<code>
- public static void main(String[] args) {
- …
- SAXParserFactory spf = <u>SAXParserFactory.newInstance</u>();
- spf.setNamespaceAware(true);
- SAXParser saxParser = <u>spf.newSAXParser</u>();
-
- MyHandler my = <kbd>new MyHandler()</kbd>;
- XMLReader xmlReader = <u>saxParser.getXMLReader</u>();
- xmlReader.<u>setContentHandler(my)</u>;
- xmlReader.parse(filename);
-}
-</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>JSP</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 -->
- <style type="text/css">
- .xml-tag { color: #00486c; }
- </style>
- <script type="text/javascript">
- <![CDATA[
- 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(function () {
- $(".inline-xml").each(function(i, elem)
- {
- var jelem = $(elem);
- var code = jelem.html();
- code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
- code = code.replace (/>/g, ">>>");
- code = code.replace (/</g, "<span class='xml-tag'><");
- code = code.replace (/>>>/g,"></span>");
-
- jelem.html(code);
- });
- });
-
- var checkSVG = function (o, i)
- {
- if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
- var svg = o.getSVGDocument();
- if (svg == null) {
- setTimeout(function() { checkSVG(o, i+1); }, 200);
- } else {
- var alltext = $(svg).find("text");
- alltext.css("font-family", "DIN");
- alltext.css("font-size", "70%");
-
- };
- };
- $(window).load(function() {
- $("embed").ready(function() {
- setTimeout(function() {
- $("embed").each(function(i, o) { checkSVG(this,0); });
-}, 1000);
- });
- });
- $(window).load(SWS.Presentation.init);
-
- ]]>
-
- </script>
-
- </head>
- <body>
- <a href="xpi_07.xhtml" class="sws-previous"/>
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>XML et Programmation Internet</h1>
- <h1>Cours 8</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a>
- </div>
- <h1>Principe</h1>
- <div class="sws-slide">
- <h1>Programmation Web coté serveur</h1>
- <p>(rappel) génération de pages-web dynamiques (<i>i.e.</i> dont
- le contenu est calculé en fonction de la requête
- HTTP). Plusieurs choix de langage côté serveur.
- </p>
- <ul>
- <li>PHP (déploiement de site très simple,
- langage <span style="text-decoration:line-through">merdique</span>
- particulier)
- </li>
- <li>Python, Ruby (manque de standardisation, plusieurs
- framework concurrents, problèmes de performances)</li>
- <li>ASP .NET (microsoft) </li>
- <li><a>Java/JSP</a> (langage raisonnable, déploiement complexe)</li>
- </ul>
-
- </div>
- <div class="sws-slide">
- <h1>JSP</h1>
- <p>JSP (Java Server Pages) est un <i>framework</i> permettant de
- créer des pages Web dynamiques en Java. Il fait partie de la
- suite Java EE (Entreprise Edition). Rappel :
- </p>
- <ul>
- <li>Java Card (Java pour cartes de crédit, très peu de choses,
- pas de GC)</li>
- <li>Java ME (Micro Edition, pour les périphériques embarqués,
- mobiles, etc.)</li>
- <li>Java SE (Standard Edition, java « normal »)</li>
- <li>Java EE (Entreprise Edition, SE + packages pour JSP, et autres)</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Architecture</h1>
- <p>Nécessite un serveur Web particulier. Le standard est Apache Tomcat.</p>
- <ul>
- <li>Le programmeur écrit des fichiers <tt>.jsp</tt>, contenant
- du HTML + du java dans des balises spéciales</li>
- <li>(Le programmeur déploie les fichiers sur le serveur
- Tomcat)</li>
- <li>L'utilisateur navigue vers une page <tt>foo.jsp</tt></li>
- <li>Le serveur Tomcat génère <tt>fooServlet.class</tt></li>
- <li>La classe est chargée dans la JVM java et (sa métode
- principale) est exécutée, produisant une page HTML</li>
- <li>La page HTML est envoyée au navigateur</li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Exemple</h1>
- <code class="background:white;">
- <![CDATA[<%@ page contentType="text/html; charset=UTF-8" %>
-
- <!DOCTYPE html>
- <html>
- <head><title>test JSP</title>
- <meta charset="UTF-8"/>
- </head>
- <body>
- Page created on
- <%]]>
- java.util.Date d = new java.util.Date();
- <s>out</s>.println(d.toString());
- <![CDATA[%>
- </body>
- </html>]]></code>
- </div>
-<div class="sws-slide">
-<h1>balises spéciales JSP</h1>
-<p>JSP introduit 4 balises spéciales qui sont interprétée par le
- serveur Tomcat.
-</p>
-<ul>
- <li>Balise de configuration : <tt><%@ … %></tt> (options HTML,
- import de packages, …)</li>
- <li>Balise de déclarations : <tt><%! … %></tt> (déclarer des
- attributs et des méthodes)</li>
- <li>Balises d'instructions : <tt><% … %></tt> (permet de mettre
- une suite d'instructions)</li>
- <li>Balises d'expressions : <tt><%= … %></tt> (permet de mettre
- une expression dont le résultat est converti en <tt>String</tt>)</li>
-</ul>
-</div>
- <div class="sws-slide">
- <h1>Exemple complet</h1>
- <code style="background:white;"> <![CDATA[<%@ page contentType="text/html; charset=UTF-8" %>
- <%@ page import="java.util.Date" %>
- <!DOCTYPE html>
- <html>
- <head><title>test JSP</title>
- <meta charset="UTF-8"/>
- </head>
- <%!
- Date maDate;
-
- Date maMethode() {
- return new Date();
- }
- %>
- <body>
- <%
- maDate = maMethode();
- %>
- Page created on <%= maDate %>
- </body>
- </html>]]></code>
- </div>
-<div class="sws-slide">
- <h1>Objets par défaut</h1>
-<p>Le code placé dans les balises spéciales a accès à certains objets
- automatiquement déclarés. Parmi les principaux :
-</p>
-<ul>
- <li><tt>out</tt> de type <tt>JspWrite</tt>
- (comme <tt>System.out</tt> mais écrit dans la page Web générée
- </li>
- <li><tt>session</tt> de type <tt>HttpSession</tt> : permet de
- définir et récupérer des variables de sessions (i.e. Objets que l'on
- stocke « globalement » et que l'on peut récupérer d'une page à
- l'autre)</li>
- <li><tt>request</tt> de type <tt>HttpServletRequest</tt> : permet
- de récupérer les paramètres passés dans une requête HTTP (par
- exemple les valeurs d'un formulaire)</li>
- <li><tt>response</tt> de type <tt>HttpServletResponse</tt> : permet
- de spécialiser la réponse envoyée au client (en-têtes HTTP,
- cookies, …)</li>
-</ul>
-</div>
-
-<div class="sws-slide">
- <h1>Classe JspWriter</h1>
- <p>Fonctionne comme <tt>System.out</tt> (on peut donc
- appeler <tt>.print/.println</tt>) mais correspond a un endroit
- particulier de la page HTML</p>
-</div>
-
-<div class="sws-slide">
-<h1>Classe HttpSession</h1>
-<p>Propose plusieurs méthodes : </p>
-<code style="background:white"> //Renvoie la valeur stockée sous le nom name
- Object <u>getAttribute</u>(String name)
-
- //Stocke l'objet value sous le nom name
- void <u>setAttribute</u>(String name, Object value)
-
- //Supprime l'association name value
- void <u>removeAttribute</u>(String name)
-
- //Définit la durée (en secondes) d'inactivité d'une session
- void <u>setMaxInactiveInterval</u>(int interval)
-
- //Renvoie la durée (en secondes) d'inactivité d'une session
- int <u>getMaxInactiveInterval</u>()
-
- //Renvoie la date (en mili-secondes depuis EPOCH) de dernière utilisation
- long <u>getLastAccessedTime</u>()
-
- //Détruit la session en cours
- void <u>invalidate</u>()</code>
-</div>
-<div class="sws-slide">
-<h1>Classe HttpServletRequest</h1>
-<p>Propose plusieurs méthodes : </p>
-<code style="background:white"> //Récupère la valeur des cookies:
- String[] <u>getCookies()</u>
-
- //Récupère les paramètres passés par un formulaire :
- Map<String, String[]><u>getParameterMap</u>()
-
- //Récupère un paramètre particulier
- String[]<u>getParameter</u>(String name)
-</code>
-</div>
-<div class="sws-slide">
-<h1>Classe HttpServletResponse</h1>
-<p>Propose plusieurs méthodes : </p>
-<code style="background:white"> //Renvoie une erreur HTTP (404 par exemple)
- void <u>sendError(int code)</u>
-
- //Ajoute un cookie au site
- void <u>addCookie</u>(Cookie c)
-
- //Effectue une redirection temporaire
- void <u>sendRedirect</u>(String url)
-</code>
-</div>
-<div class="sws-slide">
-<h1>Classe Cookie</h1>
-<p>Propose plusieurs méthodes : </p>
-<code style="background:white"> //Constructeur
- <u>Cookie</u>(String name, String value)
-
- //Expiration en secondes
- void <u>setMaxAge</u>(int a)
-</code>
-</div>
-<h1>Spécificités de Tomcat</h1>
-<div class="sws-slide">
- <h1>Chemins par défaut</h1>
-<p>Par défaut le serveur Tomcat tourne sur le port 8080 (configurable)</p>
-<ul>
- <li><tt>/var/lib/tomcat/webapps/toto/</tt> correspond à l'URL
- <tt>http://domaine:8080/toto</tt>
-</li>
- <li><tt>/var/lib/tomcat/webapps/toto/WEB-INF/</tt> contient des
- fichiers de configuration</li>
- <li><tt>/var/lib/tomcat/webapps/toto/WEB-INF/classes/</tt> contient des
- fichiers <tt>.class</tt> auxiliaires</li>
-</ul>
-<p>(ce sera configuré légèrement différement au PUIO)</p>
-</div>
-<h1>Accès aux classes JSP</h1>
-<div class="sws-slide">
- <p>Il faut avoir le fichier <tt>jsp-api.jar</tt> dans le
- classpath</p>
- <code> javac -cp /chemin/vers/jsp-api.jar MaClasse.java </code>
- <p>On peut ensuite copier le <tt>.class</tt>
- dans <tt>WEB-INF/classes</tt></p>
-</div>
-</body>
-</html>
projects / hacks / simpleWebSlides.git / commitdiff
