Listing du fichier pagsd1.php
00001 Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier. |
Retour à la page principale de
(gH)
Listing du fichier pagsd1.php
00001<?php
00002 error_reporting(E_ALL | E_NOTICE | E_STRICT) ;
00003 include("std7.php") ;
00004 include("pagsd_inc.php") ;
00005 # # (gH) -_- pagsd1.php ; TimeStamp (unix) : 29 Janvier 2019 vers 08:45
00006
00007 #######################################################################################
00008
00009 debutPage("PAGSD 1/5","strict","","pagsd.js") ;
00010
00011 debutSection() ;
00012 h1(s_span("P","gbleu")."roduction ".s_span("A","gbleu")."utomatisée de") ;
00013 h1(s_span("G","gbleu")."raphiques, ".s_span("S","gbleu")."tatistiques et ".s_span("D","gbleu")."ocuments") ;
00014 $gh = s_nbsp(20)." gilles.hunault \"at\" univ-angers.fr" ;
00015 h2($gh,"gvert") ;
00016 pvide() ;
00017 h2(" -- partie 1 sur 5 : arbres et graphes");
00018 finSection() ;
00019
00020 ##############################################################################################
00021
00022 sdl(3) ; echo cmt(' pour afficher toutes les solutions : pagsd1.php?solutions=1') ; sdl(3) ;
00023
00024 ## -------------------------------------------------------------------------------------------
00025
00026 debutSection() ;
00027
00028 $tableauDesRubriques = array() ;
00029 $idr = 0 ;
00030 $idr++; $tableauDesRubriques[$idr] = "Exemple élémentaire de tracé d'un arbre avec $dot" ;
00031 $idr++; $tableauDesRubriques[$idr] = "Théorème des quatre carrés de Lagrange en $dot via $php" ;
00032 $idr++; $tableauDesRubriques[$idr] = "Calcul de la matrice d'adjacence d'un graphe et tracé via $dot" ;
00033 $idr++; $tableauDesRubriques[$idr] = "Tracés $dot en ligne" ;
00034 $idr++; $tableauDesRubriques[$idr] = "Tracé d'un échiquier en $svg via $php " ;
00035 $idr++; $tableauDesRubriques[$idr] = "Canviz, $js et conversions de formats de graphes" ;
00036 $idr++; $tableauDesRubriques[$idr] = "Tracé de l'arbre d'un document $xhtml valide" ;
00037 $idr++; $tableauDesRubriques[$idr] = "Animation $js d'un graphe défini en $xml" ;
00038 $idr++; $tableauDesRubriques[$idr] = "Graphiques en barres" ;
00039 $idr++; $tableauDesRubriques[$idr] = "Méthodologie du développement" ;
00040 $tdmCRLM = new tdm($tableauDesRubriques) ;
00041 $tdmCRLM->titre() ;
00042 $tdmCRLM->menu("oui","oui","nou") ;
00043
00044 pvide() ;
00045
00046 p() ;
00047 echo "Il est possible d'afficher toutes les solutions via " ;
00048 echo href("pagsd1.php?solutions=1","?solutions=1","bouton_fin vert_pastel nou") ;
00049 echo " et de toutes les masquer avec " ;
00050 echo href("pagsd1.php?solutions=0","?solutions=0","bouton_fin jaune_pastel nou").". " ;
00051 finp() ;
00052
00053 finSection() ;
00054
00055 debutSection() ;
00056 $numSerie = 1 ;
00057 $numExo = 0 ;
00058
00059 ## -------------------------------------------------------------------------------------------
00060
00061 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Exemple élémentaire de tracé d'un arbre
00062
00063 ## -------------------------------------------------------------------------------------------
00064
00065 blockquote() ;
00066
00067 blockquote() ;
00068
00069 p("texte") ;
00070 echo "Ecrire un graphe en " ;
00071 echo href("http://en.wikipedia.org/wiki/DOT_%28graph_description_language%29","langage DOT","grouge nou") ;
00072 echo " pour décrire la structure classique de $xhtml : ".b('"html, head and body, title est dans le head"').". " ;
00073 echo " On générera un fichier $png. Comment le visualiser rapidement à partir de la ligne de commandes ? " ;
00074 echo " On devra obtenir un graphe identique au graphe ci-dessous." ;
00075 finp() ;
00076
00077 p() ;
00078 nbsp(15) ;
00079 $img = "xhtml.png" ;
00080 echo href($img,img($img,"",200)) ;
00081 finp() ;
00082
00083 p("texte") ;
00084 echo "Reprendre le graphe en utilisant des boites rectangulaires pour chaque noeud comme dans le graphe ci-dessous. " ;
00085 finp() ;
00086
00087 p() ;
00088 nbsp(15) ;
00089 $img = "xhtml2.png" ;
00090 echo href($img,img($img,"",200)) ;
00091 finp() ;
00092
00093 p() ;
00094 echo " Peut-on faire des cadres emboités avec ".b("$dot").", comme ci-dessous ?" ;
00095 finp() ;
00096
00097 p() ;
00098 nbsp(15) ;
00099 $img = "cadres.png" ;
00100 echo href($img,img($img,"",400)) ;
00101 finp() ;
00102
00103 p() ;
00104 echo " Comment produire le graphe ci-dessous avec ".b("$dot")." ?" ;
00105 echo " Est-ce un arbre ?" ;
00106 finp() ;
00107
00108 p() ;
00109 nbsp(15) ;
00110 $img = "carre2.png" ;
00111 echo href($img,img($img,"",200)) ;
00112 finp() ;
00113
00114
00115
00116 finblockquote() ;
00117
00118 solution($numExo,$numSerie) ;
00119
00120 p("texte") ;
00121 echo "Le langage $dot est très simple : un arc dans un graphe orienté se définit par les deux caractères ".b("->")." et se termine par la fin de ligne. " ;
00122 echo " Pour décrire la structure classique ".b("html, head and body, title est dans le head").", on peut donc se contenter du" ;
00123 echo " fichier ".href("xhtml1.dot")." suivant :" ;
00124 finp() ;
00125
00126 pre_fichier("xhtml0.dot","cadre") ;
00127
00128 p("texte") ;
00129 echo " Toutefois, la " ;
00130 #echo href("http://www.graphviz.org/Documentation/dotguide.pdf","documentation de $dot","gbleuf nou") ;
00131 echo href("dotguide.pdf","documentation de $dot","gbleuf nou") ;
00132 echo " montre qu'on peut regrouper les arcs issus d'un même sommet. " ;
00133 echo " Voici donc une solution un peu plus concise, dans le " ;
00134 echo " fichier ".href("xhtml1.dot")." suivant :" ;
00135 finp() ;
00136
00137 pre_fichier("xhtml1.dot","cadre") ;
00138
00139 p("texte") ;
00140 echo " Pour produire le fichier $png associé, il faut exécuter la commande :" ;
00141 finp() ;
00142
00143 pre_fichier("xhtml1.cmd","cadre") ;
00144
00145 p("texte") ;
00146 echo " Pour visualiser rapidement ce premier fichier $png nommé ".href("xhtml1.png").", on peut profiter du fait que Firefox sait afficher les fichiers $png " ;
00147 echo " donc pour visualiser, on peut taper la commande :" ;
00148 finp() ;
00149
00150 pre_fichier("xhtml2.cmd","cadre") ;
00151
00152 p("texte") ;
00153 echo " D'autres logiciels de visualisation d'images sont possibles, dont " ;
00154 echo href("http://doc.ubuntu-fr.org/geeqie","Geeqie") ;
00155 echo " pour Linux, on peut donc aussi taper la commande :" ;
00156 finp() ;
00157
00158 pre_fichier("xhtml3.cmd","cadre") ;
00159
00160 p("texte") ;
00161 echo " et profiter du fait que geeqie met ses listes des fichiers à jour dès qu'on crée un fichier." ;
00162 echo " Mais il y a de nombreuses autres solutions qui sont capables de n'afficher que le fichier demandé " ;
00163 echo " dont ".href("http://doc.ubuntu-fr.org/eog","eog")." (Eye of Gnome), soit la commande " ;
00164 finp() ;
00165
00166 pre_fichier("xhtml4.cmd","cadre") ;
00167
00168 p("texte") ;
00169 echo " Voir le lien ".href("http://doc.ubuntu-fr.org/visionneuse","visionneuses")." pour d'autres solutions " ;
00170 echo " de visualisations (voir d'édition) de graphiques. On peut aussi utiliser la commande " ;
00171 echo b("gnome-open xhtml1.png")." pour ouvrir le fichier-image, même si " ;
00172 echo b("gnome-open")." a sans doute été remplacé par ".href("http://askubuntu.com/questions/68961/what-can-i-use-instead-of-gnome-open","xdg-open")."... " ;
00173 echo " Plus d'infos sur ".b("xdg-open ").href("https://wiki.archlinux.org/index.php/Xdg-open","ici").". " ;
00174 finp() ;
00175
00176 # pour les boites : shape record et struct, page 8 du guide
00177
00178 p("texte") ;
00179 echo "Pour produire des boites, la lecture du manuel " ;
00180 echo href("http://www.graphviz.org/pdf/dotguide.pdf","dotguide.pdf")." (".href("dotguide.pdf","copie locale").")" ;
00181 echo " fournit la réponse, soit le fichier ".href("xhtml2.dot")." suivant et le ".href("xhtml2.png","png associé")." :" ;
00182 finp() ;
00183
00184 pre_fichier("xhtml2.dot","cadre") ;
00185
00186 p("texte") ;
00187 echo "Par contre il n'est pas possible de produire des cadres emboités de façon simple, sauf à recourir à des \"sous-graphes\"." ;
00188 finp() ;
00189
00190 p("texte") ;
00191 echo " Le dessin du carré proposé parait simple, mais le texte " ;
00192 finp() ;
00193
00194 pre_fichier("carre.dot","cadre") ;
00195
00196 p("texte") ;
00197 echo " ne produit malheureusement pas ce qu'on veut :" ;
00198 finp() ;
00199
00200 p() ;
00201 nbsp(15) ;
00202 $img = "carre1.png" ;
00203 echo href($img,img($img,"",200)) ;
00204 finp() ;
00205
00206 p("texte") ;
00207 echo " merci à Nicolas MALCOMBRE d'avoir fourni une solution simple :" ;
00208 finp() ;
00209
00210 pre_fichier("carre.txt","cadre") ;
00211
00212 finsolution() ;
00213
00214 finblockquote() ;
00215
00216 ## -------------------------------------------------------------------------------------------
00217
00218 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Théorème des quatre carrés de Lagrange
00219
00220 ## -------------------------------------------------------------------------------------------
00221
00222 # en SVG sous forme d'un arbre la décomposition d'un nombre
00223
00224 blockquote() ;
00225
00226 blockquote() ;
00227
00228 p("texte") ;
00229 $url = "http://fr.wikipedia.org/wiki/Th%C3%A9or%C3%A8me_des_quatre_carr%C3%A9s_de_Lagrange" ;
00230 echo "Le ".href($url,"théorème des quatre carrés de Lagrange","gbleuf nou")." dit que tout entier positif ou nul peut se décomposer en au " ;
00231 echo " moins une somme de 4 carrés. " ;
00232 finp() ;
00233
00234 p("cadrejaune") ;
00235 br() ;
00236 nbsp(10) ;
00237 echo " ∀n≥0, ∃a,b,c,d tels que n = a".sup("2")." + b".sup("2")." + c".sup("2")." + d".sup("2") ;
00238 br() ;
00239 nbsp() ;
00240 finp() ;
00241
00242
00243 p("texte") ;
00244 echo "Voici quelques exemples de décomposition : " ;
00245 finp() ;
00246
00247 include("ds4c_inc.php") ;
00248
00249 blockquote() ;
00250 table(1,10,"collapse") ;
00251 entetesTableau("n a b c d") ;
00252 for ($idf=1;$idf<=8;$idf++) {
00253 $n = rand(100,1000) ;
00254 if ($idf==1) { $n = 10 ; } ;
00255 if ($idf==6) { $n = 839 ; } ;
00256 if ($idf==7) { $n = 27 ; } ;
00257 list($a,$b,$c,$d) = ds4c($n) ;
00258 tr() ;
00259 td("R") ; echo $n ; fintd() ;
00260 td("R") ; echo $a ; fintd() ;
00261 td("R") ; echo $b ; fintd() ;
00262 td("R") ; echo $c ; fintd() ;
00263 td("R") ; echo $d ; fintd() ;
00264 fintr() ;
00265 } # fin pour
00266 fintable() ;
00267 finblockquote() ;
00268
00269 p("texte") ;
00270 echo "Ecrire un programme $php qui donne l'arbre des décompositions d'un entier ".b("n")." passé en paramètre, arbre " ;
00271 echo " obtenu en décomposant chacune des décompositions à son tour, comme ci-dessous pour ".b("n=839").". " ;
00272 finp() ;
00273
00274 p() ;
00275 nbsp(15) ;
00276 $img = "839.png" ;
00277 echo href($img,img($img,"",600)) ;
00278 finp() ;
00279
00280 p("texte") ;
00281 echo "On pourra utiliser le sous-programme suivant " ;
00282 echo href("montresource.php?nomfic=quatrecarres.php","quatrecarres.php") ;
00283 echo " -- ".href("ds4c.zip","archive du code php")." -- " ;
00284 echo " pour obtenir une décomposition :" ;
00285 finp() ;
00286
00287 pre_fichier("quatrecarres.php","cadre") ;
00288
00289 finblockquote() ;
00290
00291 solution($numExo,$numSerie) ;
00292
00293 p("texte") ;
00294 echo "Consulter la page ".href("lagrange.php","","gbleuf nou")." qui contient un lien vers son code-source ; " ;
00295 echo " la page ".href("lagrange2.php","","gbleuf nou")." en est une version plus \"user friendly\"." ;
00296 finp() ;
00297
00298 p("texte") ;
00299 echo "Une solution ".href("../tuteurs/tutajax.php","AJAX")." est mise en oeuvre dans " ;
00300 echo " la page ".href("lagrange3.php","","gbleuf nou").". Quelles critiques peut-on en faire ?" ;
00301 finp() ;
00302
00303 p("texte") ;
00304 echo "Pour ".b("n=635")." le fichier produit par la page ressemble très fortement à ".href("n635.dot.txt").". " ;
00305 finp() ;
00306
00307 p("texte") ;
00308 echo " Merci à Nicolas JOUSSET " ;
00309 echo " d'avoir fourni la solution récursive suivante " ;
00310 echo href("montresource.php?nomfic=lagrange3rec.php","lagrange3rec.php") ;
00311 finp() ;
00312
00313 pre_fichier("lagrange3rec.php","cadre") ;
00314
00315 # réaliser lagrange4.php : ajax en jquery et sans problème d'accent
00316
00317 finsolution() ;
00318
00319 finblockquote() ;
00320
00321 ## -------------------------------------------------------------------------------------------
00322
00323 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Calcul d'une matrice d'adjacence et tracé via DOT dans un document LaTeX via php
00324
00325 ## -------------------------------------------------------------------------------------------
00326
00327 blockquote() ;
00328
00329 blockquote() ;
00330
00331 p("texte") ;
00332 echo "On suppose qu'on dispose des " ;
00333 echo href("http://fr.wikipedia.org/wiki/Liste_d%27adjacence","listes d'adjacence","gbleuf nou") ;
00334 echo " d'un graphe dans un fichier texte. Ecrire un programme ".b("$php")." qui construit la " ;
00335 echo href("http://fr.wikipedia.org/wiki/Matrice_d%27adjacence","matrice d'adjacence","gbleuf nou")." du graphe" ;
00336 echo " puis qui utilise ".b("$dot")." pour fournir une visualisation du graphe. " ;
00337 echo " On commencera par écrire un programme en ".b("CLI")." (ligne de commandes) " ;
00338 echo " avant de fournir une page Web qui lit les ".b("listes d'adjacence") ;
00339 echo " dans un ".b("<textarea>").". " ;
00340 finp() ;
00341
00342 p("texte") ;
00343 echo "Voici un exemple d'entrée (fichier ".href("listeadj.txt").") :" ;
00344 finp() ;
00345
00346 pre_fichier("listeadj.txt","cadrebleu") ;
00347
00348 p("texte") ;
00349 echo "Et de sortie :" ;
00350 finp() ;
00351
00352 pre_fichier("matadj.txt","cadrejaune") ;
00353
00354 pre("cadre") ;
00355 nbsp(15) ;
00356 $img = "grapheadj.png" ;
00357 echo href($img,img($img,"",300)) ;
00358 finpre() ;
00359
00360 finblockquote() ;
00361
00362 solution($numExo,$numSerie) ;
00363
00364 p("texte") ;
00365 echo "Voici une " ;
00366 echo href("montresource.php?nomfic=matadj.php","première version") ;
00367 echo " pour la ligne de commande ";
00368 echo " qui correspond à la sortie fournie :" ;
00369 finp() ;
00370
00371 pre_fichier("matadj.php","cadrebleu") ;
00372
00373 p("texte") ;
00374 echo "Une deuxième version en mode Web avec un sous-programme de calcul et traitement " ;
00375 echo " est disponible à l'adresse ".href("webmatadj.php").". " ;
00376 finp() ;
00377
00378 /*
00379
00380 # version avec Javascript
00381
00382 p("texte") ;
00383 echo "Une troisième version en ligne de commandes qui utilise le sous-programme précédent de calcul et traitement " ;
00384 echo " est ".href("montresource.php?nomfic=matadjv2.php","matadjv2.php").". " ;
00385 finp() ;
00386
00387 p("texte") ;
00388 echo "Enfin une quatrième et dernière version en mode Web avec $ajax " ;
00389 echo " est disponible à l'adresse ".href("webmatadjv2.php").". " ;
00390 finp() ;
00391
00392 */
00393
00394 finsolution() ;
00395
00396 finblockquote() ;
00397
00398 ## -------------------------------------------------------------------------------------------
00399
00400 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Tracés DOT en ligne
00401
00402 ## -------------------------------------------------------------------------------------------
00403
00404 blockquote() ;
00405
00406 blockquote() ;
00407
00408 p("texte") ;
00409 echo "A la réflexion, écrire du code $dot sous éditeur, le sauvegarder puis taper une commande " ;
00410 echo b("dot -T png ...") ;
00411 echo " en ligne de commandes est un peu \"fastidieux\". Y a-t-il des pages Web qui interprètent du code $dot ?" ;
00412 finp() ;
00413
00414 finblockquote() ;
00415
00416 solution($numExo,$numSerie) ;
00417
00418 p("texte") ;
00419 echo "Oui, bien sûr. Il y a par exemple " ;
00420 echo href("http://graphs.grevian.org/graph","graphs.grevian") ;
00421 echo ", " ;
00422 echo href("http://ushiroad.com/jsviz/","jsviz") ;
00423 echo ", " ;
00424 echo href("http://sandbox.kidstrythisathome.com/erdos/","erdos") ;
00425 echo " et " ;
00426 echo href("http://ashitani.jp/gv/","gv") ;
00427 echo "." ;
00428 finp() ;
00429
00430 p("texte") ;
00431 echo "Même si elle n'est pas XHTML valide, la page " ;
00432 echo href("http://sandbox.kidstrythisathome.com/erdos/","erdos") ;
00433 echo " nous parait -- mais c'est bien sûr très subjectif -- la plus aboutie et donc " ;
00434 echo " c'est celle que nous recommandons." ;
00435 finp() ;
00436
00437 finsolution() ;
00438
00439 finblockquote() ;
00440
00441 ## -------------------------------------------------------------------------------------------
00442
00443 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Tracé d'un échiquier en SVG
00444
00445 ## -------------------------------------------------------------------------------------------
00446
00447 blockquote() ;
00448
00449 blockquote() ;
00450
00451 # utiliser doctype html5 et svg natif ?
00452
00453 p("texte") ;
00454 echo "Ecrire une page Web avec un programme $php qui produit un échiquier en $svg de taille ".b("n")."x".b("n")." où ".b("n")." est passé en paramètre." ;
00455 finp() ;
00456
00457 p("texte") ;
00458 echo "Expliquer ce que produit le code $svg suivant :" ;
00459 finp() ;
00460
00461 pre_fichier("inc_svg.txt","cadrejaune") ;
00462
00463 finblockquote() ;
00464
00465 solution($numExo,$numSerie) ;
00466
00467 p("texte") ;
00468 echo "Il pourrait être tentant de se baser sur l'échiquier proposé à la page ".href("formats.php").". " ;
00469 echo " Voici donc une première solution où ".b("n")." est indiqué dans l'URL : " ;
00470 echo href("chess1.php").". Le code-source est " ;
00471 echo href("montresource.php?nomfic=chess1.php","ici")."." ;
00472 finp() ;
00473
00474 p("texte") ;
00475 echo "Une solution plus \"propre\" consiste à proposer à l'utilisateur de choisir ".b("n")." dans " ;
00476 echo " une liste de sélection. On la trouvera ".href("chess2.php","ici")." avec un lien vers son code-source." ;
00477 finp() ;
00478
00479 p("texte") ;
00480 echo "Le code $svg proposé montre une autre façon d'écrire des cases : les instructions " ;
00481 echo b("H").", ".b("V").", ".b("v")." etc. réalisent " ;
00482 echo " des déplacements, absolus ou relatifs. Une fois ce code restructuré en " ;
00483 finp() ;
00484
00485 pre_fichier("inc2.svg","cadrejaune") ;
00486
00487 p("texte") ;
00488 echo "on voit qu'il s'agit aussi d'un ".href("inc2.svg","échiquier 8x8","gvert")." défini à l'aide de " ;
00489 echo " l'élément ".href("http://tutorials.jenkov.com/svg/path-element.html#path-commands","<path>","gnoir")." de $svg. " ;
00490 finp() ;
00491
00492 finsolution() ;
00493
00494 finblockquote() ;
00495
00496
00497 ## -------------------------------------------------------------------------------------------
00498
00499 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Canviz, Javascript et conversions
00500
00501 ## -------------------------------------------------------------------------------------------
00502
00503 blockquote() ;
00504
00505 blockquote() ;
00506
00507 p("texte") ;
00508 echo "Qu'est-ce que ".s_span("Canviz","gbleuf")." ?" ;
00509 finp() ;
00510
00511 p("texte") ;
00512 echo "Ecrire une page $php dont le rendu est ".b("XHTML strict")." valide " ;
00513 echo " avec tout le code $js ".b("externalisé") ;
00514 echo " qui reprend la page ".href("http://www.ryandesign.com/canviz/","Canviz demo","gbleuf nou").". " ;
00515 echo " On utilisera les fonctions de ".href("http://www.info.univ-angers.fr/~gh/internet/php_conceptuel.php","std.php","gvertf nou").". " ;
00516 finp() ;
00517
00518 /*
00519 p("texte") ;
00520 echo "Pourquoi vaut-il mieux nommer ".b(".gv")." ou ".b(".gv.txt")." plutôt que ".b(".dot")." les fichiers à tracer par " ;
00521 echo href("http://en.wikipedia.org/wiki/DOT_%28graph_description_language%29","langage dot","grouge nou") ;
00522 echo " ?" ;
00523 finp() ;
00524 */
00525
00526 p("texte") ;
00527 echo "Peut-on convertir facilement des fichiers $png de graphes en $svg ? Et réciproquement ?" ;
00528 finp() ;
00529
00530 finblockquote() ;
00531
00532 solution($numExo,$numSerie) ;
00533
00534 p("texte") ;
00535 echo b("Canviz")." est une bibliothèque $js de rendu pour les fichiers " ;
00536 echo href("http://www.graphviz.org/doc/info/output.html#d:xdot","XDOT","gvertf nou") ;
00537 echo " qui généralisent les fichiers " ;
00538 echo href("http://en.wikipedia.org/wiki/DOT_%28graph_description_language%29","langage DOT","grouge nou")."." ;
00539 finp() ;
00540
00541 # http://code.google.com/p/canviz/
00542 # liste des Node, Edge and Graph Attributes
00543 # http://www.graphviz.org/doc/info/attrs.html
00544
00545 # il manque la partie "view source"
00546
00547 p("texte") ;
00548 echo "Voici une page $php qui correspond aux contraintes : " ;
00549 echo href("../js/canviz/canviz.php","ghCanviz")."." ;
00550 echo " Son code source est " ;
00551 echo href("../js/canviz/montresource.php?nomfic=canviz.php",b("ici"),"orange_stim nou").". " ;
00552 echo " On laisse le soin à la lectrice et au lecteur de trouver comment accéder aux fichiers $js qui sont inclus. " ;
00553 finp() ;
00554
00555 # la démo : http://www.ryandesign.com/canviz/
00556
00557 p("texte") ;
00558 echo "Si les graphes $png sont produits par $dot, rien de plus simple : il suffit de changer de format de " ;
00559 echo " de sortie dans l'exécution de $dot. Sinon, cela risque d'être plus compliqué. " ;
00560 finp() ;
00561
00562 p("texte") ;
00563 echo "$dot gère de nombreux formats, comme on peut le voir sur l'image cliquable ci-dessous, " ;
00564 echo " extraite de la page ".href("http://www.graphviz.org/doc/info/output.html#d:image_fmts","image_fmts")." " ;
00565 echo " disponible sur le site de ".href("http://www.graphviz.org/documentation/","graphviz").". " ;
00566 finp() ;
00567
00568 pre("cadre") ;
00569 nbsp(15) ;
00570 # $img = "http://www.graphviz.org/doc/info/plugins.png" ;
00571 $img = "plugins.png" ;
00572 echo href($img,img($img,"",600)) ;
00573 finpre() ;
00574
00575 finsolution() ;
00576
00577 finblockquote() ;
00578
00579 ## -------------------------------------------------------------------------------------------
00580
00581 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Tracé de l'arbre d'un document xhtml valide
00582
00583 ## -------------------------------------------------------------------------------------------
00584
00585 blockquote() ;
00586
00587 blockquote() ;
00588
00589 # utiliser doctype html5 et svg natif ?
00590
00591 p("texte") ;
00592 echo "Ecrire un programme $php qui affiche l'arbre des éléments $xhtml d'une URL donnée " ;
00593 echo " mais sans les contenus textuels." ;
00594 echo " On produira l'arbre en $svg." ;
00595 finp() ;
00596
00597 p("texte") ;
00598 echo " Comment afficher aussi les attributs ? " ;
00599 echo " Et le début des contenus textuels ? " ;
00600 finp() ;
00601
00602 finblockquote() ;
00603
00604 solution($numExo,$numSerie) ;
00605
00606 p("texte") ;
00607 echo "Pas encore ! " ;
00608 echo "A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution satisfaisante." ;
00609 finp() ;
00610
00611 finsolution() ;
00612
00613 finblockquote() ;
00614
00615 ## -------------------------------------------------------------------------------------------
00616
00617 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Animation Javascript d'un graphe défini en XML
00618
00619 ## -------------------------------------------------------------------------------------------
00620
00621 blockquote() ;
00622
00623 blockquote() ;
00624
00625 # utiliser doctype html5 et svg natif ?
00626
00627 p("texte") ;
00628 echo "Réaliser dans une page Web un affichage progressif d'un graphe à raison d'un arc par seconde " ;
00629 echo " (durée paramétrable). " ;
00630 echo " On utilisera $svg." ;
00631 echo " Le graphe sera écrit en $xml au format " ;
00632 echo href("http://graphml.graphdrawing.org/primer/graphml-primer.html","GraphML")." ou " ;
00633 echo href("http://martin-loetzsch.de/DOTML/","DOTML").". " ;
00634 echo " On pourra utiliser les fichiers suivants pour tester la page Web : " ;
00635 echo href("xhtml.graphml").", ".href("triangle.graphml").", " ;
00636 echo href("xhtml.dotml")." et ".href("triangle.dotml").". " ;
00637 finp() ;
00638
00639 p("texte") ;
00640 echo "Au passage, comment tester qu'un fichier définissant un graphe est ".b('"valide"')." ?" ;
00641 finp() ;
00642
00643 # mettre une liste avec zone pour afficher les graphes comme dans le cours XML
00644
00645 finblockquote() ;
00646
00647 solution($numExo,$numSerie) ;
00648
00649 p("texte") ;
00650 echo "Pas encore ! " ;
00651 echo "A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution satisfaisante." ;
00652 finp() ;
00653
00654 /*
00655
00656 utiliser la transformation graphml2svg.xsl pour obtenir le svg
00657
00658 DOTML est mieux ?
00659 http://martin-loetzsch.de/DOTML/
00660
00661 */
00662
00663 finsolution() ;
00664
00665 finblockquote() ;
00666
00667 ## -------------------------------------------------------------------------------------------
00668
00669 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Graphiques en barres
00670
00671 ## -------------------------------------------------------------------------------------------
00672
00673 blockquote() ;
00674 $numQue = 0 ;
00675 blockquote() ;
00676
00677 $numQue++ ; h3("Question ".$numExo.".".$numQue) ;
00678
00679 p("texte") ;
00680 echo "Quelle est la différence entre un ".b("histogramme de classes") ;
00681 echo " et un ".b("histogramme de fréquences") ;
00682 echo " ?" ;
00683 finp() ;
00684
00685 p("texte") ;
00686 echo "Quelle est la méthode la plus rapide (moins d'une minute) pour produire un histogramme de fréquences en $png " ;
00687 echo " si on connait le titre, les modalités et les effectifs correspondant" ;
00688 echo " ?" ;
00689 finp() ;
00690
00691 p("texte") ;
00692 echo "Comment trace-t-on ces deux types d'histogrammes avec le logiciel $R" ;
00693 echo " ?" ;
00694 echo " On viendra bien sûr ajouter le nom des modalités et le titre de la figure " ;
00695 echo " dans le cas d'un histogramme de fréquences. " ;
00696 finp() ;
00697
00698 p("texte") ;
00699 echo "Quelles précautions faut-il prendre si on veut pouvoir comparer plusieurs " ;
00700 echo " histogrammes de fréquences" ;
00701 echo " ?" ;
00702 finp() ;
00703
00704 $numQue++ ; h3("Question ".$numExo.".".$numQue) ;
00705
00706
00707 p("texte") ;
00708 echo "Modifier la page de ".b("jphistopct")." pour qu'on dispose d'un paramètre supplémentaire " ;
00709 echo " nommé ".b("couleur")." et rédiger la documentation associée dans la page Web de présentation. " ;
00710 finp() ;
00711
00712 p("texte") ;
00713 echo "Ecrire ensuite un formulaire Web pour interfacer la nouvelle page de ".b("jphistopct")." y compris avec une liste " ;
00714 echo " de sélection pour la couleur. On s'arrangera pour gérer une liste quelconque de modalités et le titre " ;
00715 echo " éventuellement accentué. On affichera le graphique sous le formulaire." ;
00716 finp() ;
00717
00718 $numQue++ ; h3("Question ".$numExo.".".$numQue) ;
00719
00720 p("texte") ;
00721 echo "Ecrire une version $php en ligne de commandes qui utilise un seul paramètre, le nom d'un fichier-texte. " ;
00722 echo " Ce fichier peut contenir plusieurs séries de données à tracer. Chaque série " ;
00723 echo " contient un titre, la liste des modalités puis la liste des valeurs. Ce fichier pourra être au format " ;
00724 echo " $csv, $json, ou $xml. On fournira un ".em("help")." via les paramètres ".b("-h")." et ".b("--help").". " ;
00725 echo " On basera le nom du fichier de sortie $png sur le nom du fichier d'entrée." ;
00726 finp() ;
00727
00728 p() ;
00729 echo "Exemples possibles (mais non imposés) de tels fichiers (archive ".href("hfreq.zip").") :" ;
00730 finp() ;
00731
00732 blockquote() ;
00733 montreListe("hfreqXmp.xml hfreqXmp.csv hfreqXmp.json","hfreq") ;
00734 finblockquote() ;
00735
00736 p("texte") ;
00737 echo "Que pourrait-on ajouter à ces fichiers de données ?" ;
00738 finp() ;
00739
00740 p("texte") ;
00741 echo "On pourra suivre le plan suivant afin d'avoir un programme assez complet et testé :" ;
00742 finp() ;
00743
00744 pre_fichier("jphisto_plan.txt","cadrebleu") ;
00745
00746 finblockquote() ;
00747
00748 solution($numExo,$numSerie) ;
00749
00750 $numQue = 0 ;
00751
00752 /*
00753 p("texte") ;
00754 echo "Pas encore ! " ;
00755 echo "A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution complète satisfaisante." ;
00756 finp() ;
00757
00758 p("texte") ;
00759 echo "Voici toutefois quelques éléments de réponse." ;
00760 finp() ;
00761 */
00762
00763 $numQue++ ; h3("Réponse ".$numExo.".".$numQue) ;
00764
00765 p("texte") ;
00766 echo "Un ".b("histogramme de classes")." est la visualisation de la densité d'une variable quantitative, " ;
00767 echo " comme par exemple celle de l'age de personnes, exprimé en années, ou la longueur de séquences " ;
00768 echo " protéiques, exprimée en aa (acides aminés). Voir par exemple " ;
00769 echo "l'".href("pagsd2.php#tdm1","histogramme")." de l'exercice 1 pour la série 2 d'exercices de ce cours. ";
00770 echo " Pour un tel histogramme, une fois le problème délicat du nombre de classes (ou ".em("bins")." en anglais)" ;
00771 echo " résolu, les boites -- ou rectangles ou encore, les ".em("barres")." -- doivent être contigues " ;
00772 echo " pour bien montrer la nature continue de la variable statistique sous-jacente. " ;
00773 finp() ;
00774
00775 p("texte") ;
00776 echo "A l'opposé, un ".b("histogramme de fréquences") ;
00777 echo " sert à représenter la distribution d'une variable qualitative " ;
00778 echo " et il doit être composé de rectangles bien séparés, pour faire ressortir la nature " ;
00779 echo em("discrète")." (au sens statistique de \"discontinu\") de la variable étudiée. " ;
00780 finp() ;
00781
00782 p("texte") ;
00783 echo "La méthode la plus rapide (moins d'une minute) pour produire un histogramme de fréquences en PNG " ;
00784 echo " si on connait le titre, les modalités et les effectifs correspondant" ;
00785 echo " consiste à passer par un programme ou un script dédié, comme par exemple notre page Web " ;
00786 echo " nommée ".href("http://www.google.fr/search?q=jphistopct","jphistopct").". " ;
00787 finp() ;
00788
00789 p("texte") ;
00790 echo "Les fonctions $R correspondantes sont respectivement nommées " ;
00791 echo hrrr("hist","graphics") ;
00792 echo " et " ;
00793 echo hrrr("barplot","graphics").". " ;
00794 echo "On essaiera les commandes " ;
00795 finp() ;
00796
00797 pre("cadre") ;
00798 echo " help(\"hist\") ; \n" ;
00799 echo " example(\"hist\") ; \n" ;
00800 echo " help(\"barplot\") ; \n" ;
00801 echo " example(\"barplot\") ; \n" ;
00802 finpre() ;
00803
00804 p("texte") ;
00805 echo " pour comprendre et savoir comment utiliser ces fonctions." ;
00806 finp() ;
00807
00808 p("texte") ;
00809 echo "Ainsi, pour représenter les effectifs absolus ".b("x")." et ".b("y")." correspondant " ;
00810 echo " aux nombres de femmes et d'hommes dans un échantillon de données, on peut écrire, avec $R :" ;
00811 finp() ;
00812
00813 pre_fichier("hfreq1.r","cadre") ; # hfreq1_fig.r pour le png
00814
00815 p("texte") ;
00816 echo "On obtient alors l'histogramme de fréquences suivant :" ;
00817 finp() ;
00818
00819 pre("cadrejaune") ;
00820 nbsp(15) ;
00821 $img = "hfreq1.png" ;
00822 echo href($img,img($img,"",600)) ;
00823 finpre() ;
00824
00825 p("texte") ;
00826 echo "Il est «raisonnable» d'ajouter un titre et le nom des modalités, soit les codes :" ;
00827 finp() ;
00828
00829 pre_fichier("hfreq2.r","cadre") ; # hfreq2_fig.r pour le png
00830
00831 p("texte") ;
00832 echo "Voici le nouvel histogramme de fréquences obtenu :" ;
00833 finp() ;
00834
00835 pre("cadrejaune") ;
00836 nbsp(15) ;
00837 $img = "hfreq2.png" ;
00838 echo href($img,img($img,"",600)) ;
00839 finpre() ;
00840
00841
00842 p("texte") ;
00843 echo "Mais il est en général conseillé de calculer, fournir et tracer les ".b("effectifs relatifs")." (fréquences, pourcentages) " ;
00844 echo "plutôt que les ".b("effectifs absolus").", soit" ;
00845 echo " :" ;
00846 finp() ;
00847
00848 pre_fichier("hfreq3.r","cadre") ;
00849
00850 pre_fichier("hfreq3.res","cadrebleu") ;
00851
00852 pre("cadrejaune") ;
00853 nbsp(15) ;
00854 $img = "hfreq3.png" ;
00855 echo href($img,img($img,"",600)) ;
00856 finpre() ;
00857
00858 p("texte") ;
00859 echo "Il est alors possible de comparer des histogrammes d'effectifs relatifs (avec une même échelle), " ;
00860 echo " ce que ne permettent pas les histogrammes d'effectifs absolus, sauf à vouloir induire en erreur " ;
00861 echo " comme on peut le voir ci-dessous" ;
00862 echo " :" ;
00863 finp() ;
00864
00865 graphiques_R_png("barplot01.png","barplot02.png") ;
00866
00867 p("texte") ;
00868 echo "Le choix des valeurs 15 pour le nombre de femmes et 5 pour le nombre d'hommes " ;
00869 echo " est ".em("astucieux")." ou ".em("pratique")." dans la mesure où les pourcentages " ;
00870 echo " correspondants s'obtiennent par une simple multiplication par 5." ;
00871 finp() ;
00872
00873 $numQue++ ; h3("Réponse ".$numExo.".".$numQue) ;
00874
00875 p("texte") ;
00876 echo "Consulter ".href("../jphistopct2.php","jphistopct2")." pour la production d'histogrammes avec couleur. " ;
00877 echo " La page ".href("../f_jphistopct2.php","f_jphistopct2")." fournit un formulaire pour l'interfacer. " ;
00878 finp() ;
00879
00880 p("texte") ;
00881 echo "Si on donne une couleur non reconnue par " ;
00882 echo href("http://jpgraph.net/","jpgraph")." comme ".em("pomme").", l'histogramme n'est pas affiché. A la place, on obtient une image d'erreur comme" ;
00883 finp() ;
00884
00885 pre("cadrejaune") ;
00886 nbsp(15) ;
00887 $img = "jpgraphError.png" ;
00888 echo href($img,img($img,"",400)) ;
00889 finpre() ;
00890
00891 /* on aurait put utiliser le code
00892
00893 $url = "http://jpgraph.net/download/manuals/chunkhtml/apd.html" ;
00894 $tabCouleurs = listeDesCouleursJpgraph($url) ;
00895 $nbc = count($tabCouleurs) ;
00896
00897 pour obtenir le nombre de couleurs, soit 882
00898
00899 ###########################################################
00900
00901 function listeDesCouleursJpgraph($adr) {
00902
00903 ###########################################################
00904
00905 $cnt = file_get_contents($adr) ;
00906 preg_match("/<tbody>(.*?)tbody/",$cnt,$tabc1) ;
00907 $tabc2 = preg_split("/<td>/",$tabc1[1]) ;
00908 $nbElt = count($tabc2) ;
00909
00910 $tabCoul = array() ;
00911 $nbCoul = -1 ;
00912
00913 foreach ($tabc1 as $idc => $couleur) {
00914 $tabLigne = preg_split("/<td>/",$couleur) ;
00915 foreach ($tabLigne as $elt) {
00916 $lig = trim($elt) ;
00917 $pc = substr($lig,0,1) ; # premier caractère
00918 if (!( ($pc=="<") or ($pc=="(") )) {
00919 $coul = preg_replace("/<(.*)/","",$lig) ;
00920 #echo $lig."\n" ;
00921 #echo $coul."\n" ;
00922 $nbCoul++ ;
00923 $tabCoul[$nbCoul] = $coul ;
00924 } ; # fin si
00925 } ; # fin pour chaque
00926 } ; # fin pour chaque
00927
00928 return($tabCoul) ; # count(tabCoul) renvoie 882
00929
00930 } ; # fin fonction listeDesCouleurs
00931
00932 */
00933
00934 p("texte") ;
00935 echo "Comme la liste des couleurs (visible " ;
00936 echo href("http://jpgraph.net/download/manuals/chunkhtml/apd.html","ici").") " ;
00937 echo " est longue -- environ 880 couleurs, il serait fastidieux de fournir une liste de sélection. Nous avons " ;
00938 echo " préférer laisser l'utilisateur consulter la page des couleurs dans une autre fenêtre. " ;
00939 echo " Pour répondre exactement à l'énoncé (afficher l'image sous le formulaire et couleur OK), on utilisera le formulaire " ;
00940 echo " ".href("../f_jphistopct3.php","f_jphistopct3").". On notera que la vérification des couleurs " ;
00941 echo " est dynamique et qu'on met ".b("navy")." si la couleur n'existe pas." ;
00942 finp() ;
00943
00944 $numQue++ ; h3("Réponse ".$numExo.".".$numQue) ;
00945
00946 p("texte") ;
00947 echo "Le fichier ".href("jphisto.zip","jphisto.php")." fournit la solution demandée en ligne de commandes. " ;
00948 echo " Voici quelques exemples d'utilisation" ;
00949 echo " :" ;
00950 finp() ;
00951
00952 pre_fichier("jphisto_xmps.txt","cadre") ;
00953
00954 p("texte") ;
00955 echo "Ce qu'il manque à ces fichiers, c'est sans doute la valeur de l'effectif total (le nombre de valeurs " ;
00956 echo " en tout), de façon à pouvoir tester la somme des effectifs." ;
00957 finp() ;
00958
00959 p("texte") ;
00960 echo "Le fait d'avoir écrit sous forme de commentaires le " ;
00961 echo href("jphisto_plan.txt","plan") ;
00962 echo " du programme induit l'organisation physique des fichiers " ;
00963 echo " dans le cas d'un travail collaboratif : " ;
00964 finp() ;
00965
00966 pre_fichier("jphisto_plan2.txt","cadrebleu") ;
00967
00968
00969 p("texte") ;
00970 echo "Il va de soi qu'alors une telle organisation doit indiquer quels sous-programmes " ;
00971 echo " sont utilisés, avec le détail des entrées et des sorties, comme par exemple :" ;
00972 finp() ;
00973
00974 pre_fichier("jphisto_plan3.txt","cadrebleu") ;
00975
00976 p("texte") ;
00977 echo " Cela permet notamment au développeur de la partie 3.3 (production du PNG) " ;
00978 echo " d'écrire sa fonction sans attendre la fin de l'écriture de la partie 3.2 " ;
00979 echo " (lecture des données) :" ;
00980 finp() ;
00981
00982 pre_fichier("jphisto_plan4.txt","cadrebleu") ;
00983
00984 finsolution() ;
00985
00986 finblockquote() ;
00987
00988
00989 ## -------------------------------------------------------------------------------------------
00990
00991 $tdmCRLM->afficheRubrique("oui") ; $numExo++ ; # Méthodologie de développement
00992
00993 ## -------------------------------------------------------------------------------------------
00994
00995 blockquote() ;
00996
00997 blockquote() ;
00998
00999 p("texte") ;
01000 echo "Nous avons vu avec la décomposition de Lagrange (archive de la solution ".href("lagrange.zip").") et " ;
01001 echo " avec la matrice d'adjacence d'un graphe (archive de la solution ".href("matadj.zip").") " ;
01002 echo " qu'il y a une " ;
01003 gvert("méthode pour écrire du $php");
01004 echo " afin d'aboutir " ;
01005 echo grouge("progressivement")." à une page Web compléte " ;
01006 echo " utilisable sans rechargement de la page. Détailler cette méthode. " ;
01007 finp() ;
01008
01009 p("texte") ;
01010 echo "Quelles sont les contraintes supplémentaires rajoutées par le fait qu'on utilise " ;
01011 echo " un exécutable en ligne de commandes qui produit une image ?" ;
01012 finp() ;
01013
01014 finblockquote() ;
01015
01016 solution($numExo,$numSerie) ;
01017
01018 /*
01019 p("texte") ;
01020 echo "Solution présentée en cours mais non encore rédigée." ;
01021 finp() ;
01022 */
01023
01024
01025 p("texte") ;
01026 echo "Un programme $php qui s'exécute en ligne de commandes et une page Web en $php " ;
01027 echo " qui utilise $ajax pour afficher des données sont des programmes dont le " ;
01028 echo "«coeur» est le même mais dont «l'enrobage» sont " ;
01029 echo " différents. " ;
01030 sdl() ;
01031 echo " Il est sans doute raisonnable de commencer avec la ligne de commande " ;
01032 echo " et d'utiliser ".rouge("\$ARGV")." pour les paramètres et d'écrire et de tester les " ;
01033 echo " sous-programmes de calcul, de lecture et d'écriture avant de passer " ;
01034 echo "(un problème à la fois) à une page Web classique, sans doute avec l'utilisation du " ;
01035 echo " du mode ".rouge("GET")." et de la variable-tableau ".rouge("\$_GET")." pour la gestion des " ;
01036 echo " paramètres. " ;
01037 sdl() ;
01038 echo " Il restera ensuite à redesigner la page Web avec des sous-programmes ";
01039 echo " et des paramètres pour décider d'afficher ou non l'entête de la page Web " ;
01040 echo " (partie ".rouge("<html>")." et ".rouge("<head>").") pour pouvoir récupérer la partie à insérer en $ajax." ;
01041 finp() ;
01042
01043 p("texte") ;
01044 echo "Si le programme $php (ou la page Web) utilise " ;
01045 echo " un exécutable en ligne de commandes qui produit une image, " ;
01046 echo " il faut bien sûr d'abord vérifier que l'exécutable est accessible sur le serveur. " ;
01047 echo " Ensuite, il faut se rappeler qu'en ligne de commandes c'est l'utilisateur \"normal\" qui " ;
01048 echo " exécute le code alors que pour une page Web le browser utilise un autre utilisateur qui " ;
01049 echo " n'a pas les mêmes droits. Par exemple sous ".b("Linux")." l'utilisateur " ;
01050 echo " associé au navigateur est nommé " ;
01051 echo b("www-data")." et il fait partie du groupe " ;
01052 echo b("www-data").". Il faut aussi choisir si on écrit dans la zone temporaire du serveur Web " ;
01053 echo " (répertoire ".b("/tmp")." du serveur, qui n'est sans doute pas le " ;
01054 echo " répertoire ".b("/tmp")." du système d'exploitation sous-jacent) " ;
01055 echo " ou si on écrit dans un répertoire personnel qui ne sert qu'à cela (avec sans doute les " ;
01056 echo " droits définis sous Linux par ".vert("chmod +777)").") sachant qu'alors " ;
01057 echo " le système ne fait pas \"le ménage\" dans ce répertoire et qu'il faut donc le vider " ;
01058 echo " manuellement de temps en temps. Et «naturellement», on utilisera " ;
01059 echo " la fonction de $php nommée ".b("tempnam()")." pour éviter les accès concurrents..." ;
01060 finp() ;
01061
01062
01063 finsolution() ;
01064
01065 finblockquote() ;
01066
01067 ## -------------------------------------------------------------------------------------------
01068 p() ;
01069 echo href("montresource.php?nomfic=pagsd1.php","Code-source de cette page","orange_stim nou")." ; " ;
01070 echo " fichiers inclus : ".href("montresource.php?nomfic=pagsd_inc.php","pagsd_inc.php","orange_stim nou") ;
01071 echo " et ".href("montresource.php?nomfic=pagsd.js","pagsd.js","orange_stim nou")."." ;
01072 finp() ;
01073
01074 finSection() ;
01075 finPage() ;
01076 ?>
Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier.