Listing du fichier l2_crs.php
00001 <?php
00002 # (gH) -_- l2_crs.php ; TimeStamp (unix) : 27 Mars 2010 vers 14:53
00003 include("../std.php") ;
00004 debutPage("DEVELOPPEMENT WEB L2","strict") ;
00005 debutSection("100%") ;
00006 h1("SUPPORTS ET DOCUMENTS DE COURS") ;
00007 h1("Développement Web L2") ;
00008 h1("(Faculté des Sciences d'Angers)") ;
00009
00010 p("grouge droite") ;
00011 echo "gilles.hunault \"at\" univ-angers.fr" ;
00012 finp() ;
00013
00014 #########################################################
00015
00016 function crs($num) {
00017 h2("Ce que vous devez avoir retenu du cours numéro $num ") ;
00018 } # fin de fonction tp
00019
00020 #########################################################
00021 #########################################################
00022
00023 h2("Documents à consulter") ;
00024
00025 ul() ;
00026 li(s_span("[GH] ","gvert").ancre("../pagesweb/pagesweb.htm","sensibilisation aux pages Web")." ; ") ;
00027 li(s_span("[GH] ","gvert").ancre("../tuteurs/tutjs.htm","tuteur pour le langage Javascript")." ; ") ;
00028 li(ancre("devred.pdf","développement Web").", cours de Caroline DEVRED ;") ;
00029 li(ancre("http://fr.selfhtml.org/","SELFHTML").", un site de référence ;") ;
00030 li(ancre("pdc.htm","technologie internet").", un cours plus détaillé avec plus de références.") ;
00031 li(ancre("http://actuel.fr.selfhtml.org/supplements/panneau-xhtml.htm","référence XHTML")) ;
00032 li(ancre("http://actuel.fr.selfhtml.org/supplements/panneau-css.htm","référence CSS")) ;
00033 finul() ;
00034
00035 h2("Documents à imprimer") ;
00036
00037 ul() ;
00038 li(ancre("../refcards/html-cheat-sheet.pdf","tout XHTML en une page")) ;
00039 li(ancre("../refcards/css1.pdf","tout CSS niveau 1 en deux pages")) ;
00040 li(ancre("../refcards/css2.pdf","tout CSS niveau 2 en deux pages")) ;
00041 finul() ;
00042
00043 #########################################################
00044
00045 crs(1) ;
00046
00047 #########################################################
00048
00049 blockquote() ;
00050 p("texte") ;
00051 echo "La ".em("structure")." et la ".em("mise en forme")." des ".s_span("éléments","grouge")." d'une page Web " ;
00052 echo " (dont les ".em("liens hypertextes")." et les ".em("formulaires").") " ;
00053 echo " se définissent " ;
00054 echo " par des ".b("balises")." qui utilisent les symboles ".s_span("<","gvert")." et ".s_span(">","gvert")." " ;
00055 echo " qu'on appelle des ".b("marqueurs").". " ;
00056 echo " Pour écrire des caractères spéciaux, on utilise des ".s_span("entités","grouge")." " ;
00057 echo " repérées par les symboles ".s_span("&","gvert")." et ".s_span(";","gvert").". Les balises " ;
00058 echo " délimitent ces ".s_span("éléments","grouge")." et elles s'écrivent de façon stricte selon des règles précises définies par " ;
00059 echo " une ".b("grammaire")." (".s_span("doctype","gbleuf")."). Les principaux éléments, assez peu nombreux, sont : " ;
00060 echo s_span("html head title body h1 h2 div p ol ul li table th tr td a img span","gvert")."." ;
00061 echo " Il y a des ".href("xhtml_rules.htm","règles")." à respecter pour que les navigateurs (Internet Explorer, Firefox, Opera...) " ;
00062 echo " soient capables d'interpréter correctement ces éléments et leur mise en forme." ;
00063 echo " La balise ouvrante d'un élément peut contenir un ou plusieurs ".s_span("attributs","grouge")." qui " ;
00064 echo " utilisent le format ".s_span("nom_d_attribut=\"valeur_d_attribut\"","gvert").", comme par exemple " ;
00065 echo " dans ".s_span("<td align='right'>","bleu")." ou dans ".s_span("<span class='papagilles'>","bleu")."." ;
00066 finp() ;
00067
00068 p("texte") ;
00069 echo b("Rappel :")." il ne faut jamais hésiter à consulter le \"code-source\" d'une page." ;
00070 finp() ;
00071
00072 p("texte") ;
00073 echo " La différence entre un ".s_span("document classique","gvert")." et une ".s_span("page Web","gvert")." passe " ;
00074 echo " entre autres par les ".b("couleurs, images, liens hypertextes et formulaires")."." ;
00075 echo " Il y a des éléments ".b("en ligne")." et d'autres en ".b("blocs")." (ou \"boites\"). " ;
00076 echo " Les divisions et les paragraphes, ainsi que les listes et les " ;
00077 echo " tableaux permettent de structurer le document en éléments et sous-éléments. " ;
00078 echo " La mise en forme des ".b("éléments") ;
00079 echo " (gras, couleur, marges...) se fait à l'aide d'".b("attributs")." et de ".b("propriétés CSS") ;
00080 echo " et il y en a beaucoup en CSS 1 et 2. On associe à des propriétés ou des " ;
00081 echo " groupes de propriétés des ".b("noms")." de ".s_span("style","gvert")." qui s'utilisent via l'attribut " ;
00082 echo s_span("class","gvert")." et l'élément ".s_span("span","gvert").". Définir des styles permet " ;
00083 echo " d'avoir des noms pour des mises en forme communes, de fournir un aspect homogène au long des pages." ;
00084 finp() ;
00085
00086 p("texte") ;
00087 echo " Pour \"bien\" écrire des pages Web, il faut commencer par écrire le texte \"au kilomètre\", " ;
00088 echo " puis penser à la ".b("structure")." (découpage en éléments) " ;
00089 echo " et enfin ajouter les attributs et les styles pour la ".b("mise en forme")."." ;
00090 echo " Chaque page écrite dans le cadre de ce cours doit être ".b("valide")." pour la grammaire nommée " ;
00091 echo b("strict")." car sinon, il n'est pas garanti qu'on puisse accéder aux éléments de la page." ;
00092 finp() ;
00093
00094 blockquote() ;
00095 div("bgcolor_jaunef_encadre") ;
00096 p() ;
00097 nbsp(5) ;
00098 echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
00099 echo href("http://www.rexswain.com/sampler.html","Rex Swain's HTML Sampler","nou") ;
00100 nbsp(5) ;
00101 echo " ; 2. ".href("eltatt.php","eltatt","nou")."." ;
00102 finp() ;
00103 findiv() ;
00104 finblockquote() ;
00105
00106 finblockquote() ;
00107
00108 #########################################################
00109
00110 crs(2) ;
00111
00112 #########################################################
00113
00114 blockquote() ;
00115 p("texte") ;
00116 echo " Il y a assez peu d'éléments en ".s_span("XHTML","gvert")." et il est assez facile de s'y retrouver avec un peu d'entrainement. " ;
00117 echo " Il y a beaucoup d'éléments en ".s_span("CSS","gvert")." et on peut s'y perdre. De plus, les rendus ne sont pas toujours les mêmes " ;
00118 echo " suivant les navigateurs. Il faut donc ".b("rester prudent(e) avec CSS").", surtout qu'on peut écrire des styles à la volée, " ;
00119 echo " en interne, en externe et qu'il peuvent être en cascade ou hérités... et que ce qu'on est autorisé à écrire dépend de la " ;
00120 echo " ".b("grammaire")." utilisée. " ;
00121 finp() ;
00122
00123 p("texte") ;
00124 echo b("Conseil :")." il faut utiliser uniquement des syles externes (définis dans un fichier .CSS) " ;
00125 echo " comme notre fichier ".href("std.css").". " ;
00126 finp() ;
00127
00128 p("texte") ;
00129 echo " Les ".b("formulaires")." fournissent aux pages Web une grande ".b("interaction avec l'utilisateur").". Il y a de nombreuses " ;
00130 echo " façons de saisir un texte, un nombre, de faire un ou plusieurs choix... Une façon de réagir aux ". s_span("valeurs entrées","grouge")." dans les " ;
00131 echo " formulaires et aux ".s_span("évènements","grouge")." (clavier, souris...) est d'utiliser un script ".s_span("Javascript","gvert") ;
00132 echo " qui agit en local (même sans connexion " ;
00133 echo " à Internet). Une autre façon de réagir aux formulaires est de transmettre les données de l'utilisateur au serveur (distant) pour qu'il " ;
00134 echo " les traite, par exemple via un programme ".s_span("Php","gvert").". " ;
00135 finp() ;
00136
00137 p("texte") ;
00138 echo s_span("Javascript","gvert")." est un ".b("langage de programmation")." qui permet à l'utilisateur d'interagir " ;
00139 echo " avec la page Web via le navigateur. " ;
00140 echo " Au niveau le plus élémentaire on peut s'en servir pour afficher un " ;
00141 echo " message, pour tester une valeur dans un formulaire ou effectuer une opération simple " ;
00142 echo " comme une multiplication, une conversion d'unités... " ;
00143 echo " A un niveau plus avancé, Javascript permet de faire des ".b("boucles").", de traiter des morceaux entiers de page Web, " ;
00144 echo " d'".b("ajouter, supprimer ou modifier dynamiquement")." tous les éléments d'une page et/ou leurs attributs. Cela se " ;
00145 echo " fait via le repérage des éléments dans le cadre du modèle informatique (objet) du document nommé ".s_span("DOM","gvert").". " ;
00146 echo " Il faut maitriser la notion de variable, d'affectation, de test et de boucle en Javascript avant " ;
00147 echo " d'approfondir la notion de tableau, d'objet puis d'évènement pour être capable de " ;
00148 echo " gérer une page Web via Javascript. Au niveau conceptuel, une page Web est un ". s_span("arbre informatique étiqueté","grouge")." dont les noeuds " ;
00149 echo " correspondent aux éléments et les étiquettes aux attributs. Une gestion objets de cet arbre en Javascript est donc «naturelle»." ;
00150 finp() ;
00151
00152 p("texte") ;
00153 echo b("Remarque :")." dans un formulaire (élément ".b("form")."), l'attribut ".b("action")." est obligatoire. " ;
00154 echo " Pour que le navigateur n'utilise pas cette \"action\", on utilisera un ".b("return false")." de " ;
00155 echo s_span("Javascript","gbleuf")." associé à l'évènement ".b("onsubmit")." (pas onclick)." ;
00156 finp() ;
00157
00158 blockquote() ;
00159 div("bgcolor_jaunef_encadre") ;
00160 p() ;
00161 nbsp(5) ;
00162 echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
00163 echo href("cssprop.php","cssprop","nou") ;
00164 nbsp(5) ;
00165 echo " ; 2. ".href("http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html","css (siteduzero)","nou") ;
00166 nbsp(5) ;
00167 echo " ; 3. ".href("envois.php","envois","nou") ;
00168 echo "." ;
00169 finp() ;
00170 findiv() ;
00171 finblockquote() ;
00172
00173 finblockquote() ;
00174
00175 #########################################################
00176
00177 crs(3) ;
00178
00179 #########################################################
00180
00181 blockquote() ;
00182 p("texte") ;
00183 echo "Pour que ". s_span("Javascript","gvert")." puisse agir sur les éléments, le document doit être ".b("bien formé")." et " ;
00184 echo b("valide").". Pour accéder à un élément unique, via son attribut ".b("id")." (qui doit être lui aussi unique), " ;
00185 echo " on utilise ".s_span("document.getElementById","gbleuf")." (notez qu'il n'y a pas de ".b("s")." à Element). " ;
00186 echo " Par contre, pour gérer plusieurs éléments de même nature il faut appeler la fonction " ;
00187 echo s_span("document.getElementsByTagName","gbleuf").", " ;
00188 echo " (notez qu'il y a un ".b("s")." à Elements). " ;
00189 echo " On peut ensuite consulter les attributs d'un élément avec " ;
00190 echo s_span("getAttribute","gbleuf")." ou les changer avec " ;
00191 echo s_span("setAttribute","gbleuf").". La création d'élements passe par " ;
00192 echo s_span("createElement","gbleuf")." et " ;
00193 echo s_span("createTextNode","gbleuf")." ; on peut ensuite insérer ces éléments avec " ;
00194 echo s_span("appendChild","gbleuf")." et " ;
00195 echo s_span("insertBefore","gbleuf").". " ;
00196 echo "Bien sûr, ".s_span("createAttribute","gbleuf")." permet de créer un attribut." ;
00197 finp() ;
00198
00199 p("texte") ;
00200 echo "Un document XHTML bien formé et valide est structuré en tant qu'" ;
00201 echo s_span("arbre informatique enraciné étiqueté","grouge")." dont les ". s_span("noeuds","grouge") ;
00202 echo " sont les ".b("éléments")." et les ". s_span("étiquettes","grouge")." correspondent aux ".b("attributs").". " ;
00203 echo " A l'aide de ". s_span("Javascript","gvert").", il est possible de passer en revue par boucle ou " ;
00204 echo " récursivement tous les sous-éléments d'un noeud ou d'un sous-arbre. " ;
00205 finp() ;
00206
00207 p("texte") ;
00208 echo "Pour bien programmer en ". s_span("Javascript","gvert")." il faut connaitre " ;
00209 echo " les ".s_span("objets","grouge")." standard dans et hors du ".s_span("DOM","gbleuf").". " ;
00210 echo " Il faut s'entrainer à utiliser les méthodes spécifiques " ;
00211 echo " aux objets et savoir passer en revue les contenus." ;
00212 finp() ;
00213
00214 blockquote() ;
00215 div("bgcolor_jaunef_encadre") ;
00216 p() ;
00217 nbsp(5) ;
00218 echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
00219 echo href("../tuteurs/domsimple.htm","DOM simple","nou") ;
00220 nbsp(5) ;
00221 echo " ; 2. ".href("../tuteurs/testdom.htm","testdom","nou")."." ;
00222 nbsp(5) ;
00223 echo " ; 3. ".href("montresource.php?nomfic=sorttable.js","triTableaux","nou")."." ;
00224 finp() ;
00225 findiv() ;
00226 finblockquote() ;
00227
00228 finblockquote() ;
00229
00230 #########################################################
00231
00232 crs(4) ;
00233
00234 #########################################################
00235
00236
00237 blockquote() ;
00238 p("texte") ;
00239 echo "Comme pour tout langage de programmation, " ;
00240 echo s_span("Javascript","gvert") ;
00241 echo " impose de bien réfléchir avant d'écrire du code. " ;
00242 echo " En particulier, écrire un algorithme des actions à effectuer, dessiner même grossièrement au brouillon " ;
00243 echo " l'interface ou le ".em("design")." des pages permet de bien nommer les variables, les éléments, " ;
00244 echo " de penser aux attributs, aux id, de simuler et tester " ;
00245 echo " la ".b("perfection des parties")." pour obtenir la ".b("cohésion")." et la ".b("cohérence de l'ensemble")."." ;
00246 finp() ;
00247
00248 p("texte") ;
00249 echo "Le ".em("debugage")." et la ".em("mise au point des programmes")." peut se faire à l'aide d'une " ;
00250 echo b("console d'erreur standard")." du navigateur ou des zones de dialogue dans la page, qu'on masque une fois le programme terminé." ;
00251 echo " On peut aussi utiliser la console de Firebug à l'aide de ".b("console.debug(...)").". " ;
00252 echo " L'ajout de commentaires dans le code-source de même que le recours systématique à des " ;
00253 echo " sous-programmes (fonctions) est une pratique obligatoire de façon à produire un code \"propre\" et \"robuste\"." ;
00254 finp() ;
00255
00256 p("texte") ;
00257 echo href("../tuteurs/tutxml.htm",s_span("XML","gvert"),"nou") ;
00258 echo " est à la fois un modèle général, une technologie et un sur-ensemble de XHTML. Couplé à " ;
00259 echo s_span("Javascript","gvert") ;
00260 echo ", " ;
00261 echo s_span("XML","gvert") ;
00262 echo " peut fournir des pages réactives en \"Web 2.0\" via ce qu'on nomme " ;
00263 echo href("../tuteurs/tutajax.php",s_span("AJAX","grouge"),"nou") ;
00264 echo "." ;
00265 finp() ;
00266
00267 blockquote() ;
00268 div("bgcolor_bleum_encadre") ;
00269 p() ;
00270 nbsp(5) ;
00271 echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
00272 echo href("http://wipos.p.lodz.pl/zylla/games/hanoi5e.html","hanoi5e","nou").", " ;
00273 nbsp(3) ;
00274 echo href("hanoi/hanoi.htm","hanoi.htm","nou").", " ;
00275 nbsp(3) ;
00276 echo " et " ;
00277 nbsp(3) ;
00278 echo href("hanoi/hanoi.xml","hanoi.xml","nou") ;
00279 nbsp(5) ;
00280 echo " ; 2. tuteurs " ;
00281 echo href("../tuteurs/tutxml.htm","xml","nou").", " ;
00282 nbsp(3) ;
00283 echo href("orbit_js.svg","orbites","nou") ;
00284 echo " et " ;
00285 nbsp(3) ;
00286 echo href("../tuteurs/tutajax.php","ajax","nou")."." ;
00287 finp() ;
00288 findiv() ;
00289 finblockquote() ;
00290
00291 finblockquote() ;
00292
00293 #########################################################
00294
00295 h2("Au final :" ) ;
00296
00297 blockquote() ;
00298 ol() ;
00299
00300 debutli() ;
00301 p("texte") ;
00302 echo s_span("XHTML","gvert")." est le langage de description des pages qui permet d'avoir une structure dynamique exploitable en tant qu'arbre étiqueté " ;
00303 echo " sous réserve que les pages soient ".b("bien formées")." et ".b("valides").". " ;
00304 finp() ;
00305 finli() ;
00306
00307 debutli() ;
00308 p("texte") ;
00309 echo s_span("CSS","gvert")." permet une mise en forme propre et commune aux différentes pages via des " ;
00310 echo b("styles")." définis dans des fichiers externes communs ; " ;
00311 echo "CSS assure un affichage précis voire esthétique de chacun des morceaux de la page via l'attribut " ;
00312 echo s_span("class","gbleuf")." et l'élément " ;
00313 echo s_span("span","gbleuf")."." ;
00314 finp() ;
00315 finli() ;
00316
00317 debutli() ;
00318 p("texte") ;
00319 echo s_span("JAVASCRIPT","gvert")." est un langage de programmation à " ;
00320 echo b("objets") ;
00321 echo " qui fournit une gestion et un controle dynamique de la page, " ;
00322 echo " ce qui permet d'avoir une page \"réactive\". Javascript accède aux éléments, à leur attributs et permet " ;
00323 echo " de les modifier, supprimer ou ajouter tout ou partie d'une page Web. " ;
00324 finp() ;
00325 finli() ;
00326
00327 debutli() ;
00328 p("texte") ;
00329 echo s_span("XML","grouge").", c'est « la cour des grands », avec des grammaires " ;
00330 echo b("DTD")." et ".b("XSD")." pour " ;
00331 echo " garantir et valider les contenus, des actions ".b("XSL")." pour transformer " ;
00332 echo " dynamiquement l'arbre des éléments sur le serveur ou à la volée par le navigateur. ".b("XML")." est " ;
00333 echo " LE format d'".b("interopérabilité")." d'aujourd'hui. Ainsi le X des fichiers .docx dans Microsoft Word " ;
00334 echo " est mis pour XML..." ;
00335 finp() ;
00336 finli() ;
00337
00338 finol() ;
00339
00340 pvide() ;
00341 finblockquote() ;
00342
00343 p() ;
00344 echo href("montresource.php?nomfic=l2_crs.php","Code-source de cette page","orange_stim nou") ;
00345 finp() ;
00346
00347 #########################################################
00348 #########################################################
00349 finSection() ;
00350 finPage() ;
00351 ?>
La coloration syntaxique est réalisée par un enrobage de la function php nommée highlight_file
mais si vous préférez, vous pouvez utiliser celle de SyntaxHighlighter ou même celle de geshi.
Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier.
Retour à la page principale de (gH)