Listing du fichier l2_crs.php avec syntaxhighlighter
<?php
# (gH) -_- l2_crs.php ; TimeStamp (unix) : 27 Mars 2010 vers 14:53
include("../std.php") ;
debutPage("DEVELOPPEMENT WEB L2","strict") ;
debutSection("100%") ;
h1("SUPPORTS ET DOCUMENTS DE COURS") ;
h1("Développement Web L2") ;
h1("(Faculté des Sciences d'Angers)") ;
p("grouge droite") ;
echo "gilles.hunault \"at\" univ-angers.fr" ;
finp() ;
#########################################################
function crs($num) {
h2("Ce que vous devez avoir retenu du cours numéro $num ") ;
} # fin de fonction tp
#########################################################
#########################################################
h2("Documents à consulter") ;
ul() ;
li(s_span("[GH] ","gvert").ancre("../pagesweb/pagesweb.htm","sensibilisation aux pages Web")." ; ") ;
li(s_span("[GH] ","gvert").ancre("../tuteurs/tutjs.htm","tuteur pour le langage Javascript")." ; ") ;
li(ancre("devred.pdf","développement Web").", cours de Caroline DEVRED ;") ;
li(ancre("http://fr.selfhtml.org/","SELFHTML").", un site de référence ;") ;
li(ancre("pdc.htm","technologie internet").", un cours plus détaillé avec plus de références.") ;
li(ancre("http://actuel.fr.selfhtml.org/supplements/panneau-xhtml.htm","référence XHTML")) ;
li(ancre("http://actuel.fr.selfhtml.org/supplements/panneau-css.htm","référence CSS")) ;
finul() ;
h2("Documents à imprimer") ;
ul() ;
li(ancre("../refcards/html-cheat-sheet.pdf","tout XHTML en une page")) ;
li(ancre("../refcards/css1.pdf","tout CSS niveau 1 en deux pages")) ;
li(ancre("../refcards/css2.pdf","tout CSS niveau 2 en deux pages")) ;
finul() ;
#########################################################
crs(1) ;
#########################################################
blockquote() ;
p("texte") ;
echo "La ".em("structure")." et la ".em("mise en forme")." des ".s_span("éléments","grouge")." d'une page Web " ;
echo " (dont les ".em("liens hypertextes")." et les ".em("formulaires").") " ;
echo " se définissent " ;
echo " par des ".b("balises")." qui utilisent les symboles ".s_span("<","gvert")." et ".s_span(">","gvert")." " ;
echo " qu'on appelle des ".b("marqueurs").". " ;
echo " Pour écrire des caractères spéciaux, on utilise des ".s_span("entités","grouge")." " ;
echo " repérées par les symboles ".s_span("&","gvert")." et ".s_span(";","gvert").". Les balises " ;
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 " ;
echo " une ".b("grammaire")." (".s_span("doctype","gbleuf")."). Les principaux éléments, assez peu nombreux, sont : " ;
echo s_span("html head title body h1 h2 div p ol ul li table th tr td a img span","gvert")."." ;
echo " Il y a des ".href("xhtml_rules.htm","règles")." à respecter pour que les navigateurs (Internet Explorer, Firefox, Opera...) " ;
echo " soient capables d'interpréter correctement ces éléments et leur mise en forme." ;
echo " La balise ouvrante d'un élément peut contenir un ou plusieurs ".s_span("attributs","grouge")." qui " ;
echo " utilisent le format ".s_span("nom_d_attribut=\"valeur_d_attribut\"","gvert").", comme par exemple " ;
echo " dans ".s_span("<td align='right'>","bleu")." ou dans ".s_span("<span class='papagilles'>","bleu")."." ;
finp() ;
p("texte") ;
echo b("Rappel :")." il ne faut jamais hésiter à consulter le \"code-source\" d'une page." ;
finp() ;
p("texte") ;
echo " La différence entre un ".s_span("document classique","gvert")." et une ".s_span("page Web","gvert")." passe " ;
echo " entre autres par les ".b("couleurs, images, liens hypertextes et formulaires")."." ;
echo " Il y a des éléments ".b("en ligne")." et d'autres en ".b("blocs")." (ou \"boites\"). " ;
echo " Les divisions et les paragraphes, ainsi que les listes et les " ;
echo " tableaux permettent de structurer le document en éléments et sous-éléments. " ;
echo " La mise en forme des ".b("éléments") ;
echo " (gras, couleur, marges...) se fait à l'aide d'".b("attributs")." et de ".b("propriétés CSS") ;
echo " et il y en a beaucoup en CSS 1 et 2. On associe à des propriétés ou des " ;
echo " groupes de propriétés des ".b("noms")." de ".s_span("style","gvert")." qui s'utilisent via l'attribut " ;
echo s_span("class","gvert")." et l'élément ".s_span("span","gvert").". Définir des styles permet " ;
echo " d'avoir des noms pour des mises en forme communes, de fournir un aspect homogène au long des pages." ;
finp() ;
p("texte") ;
echo " Pour \"bien\" écrire des pages Web, il faut commencer par écrire le texte \"au kilomètre\", " ;
echo " puis penser à la ".b("structure")." (découpage en éléments) " ;
echo " et enfin ajouter les attributs et les styles pour la ".b("mise en forme")."." ;
echo " Chaque page écrite dans le cadre de ce cours doit être ".b("valide")." pour la grammaire nommée " ;
echo b("strict")." car sinon, il n'est pas garanti qu'on puisse accéder aux éléments de la page." ;
finp() ;
blockquote() ;
div("bgcolor_jaunef_encadre") ;
p() ;
nbsp(5) ;
echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
echo href("http://www.rexswain.com/sampler.html","Rex Swain's HTML Sampler","nou") ;
nbsp(5) ;
echo " ; 2. ".href("eltatt.php","eltatt","nou")."." ;
finp() ;
findiv() ;
finblockquote() ;
finblockquote() ;
#########################################################
crs(2) ;
#########################################################
blockquote() ;
p("texte") ;
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. " ;
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 " ;
echo " suivant les navigateurs. Il faut donc ".b("rester prudent(e) avec CSS").", surtout qu'on peut écrire des styles à la volée, " ;
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 " ;
echo " ".b("grammaire")." utilisée. " ;
finp() ;
p("texte") ;
echo b("Conseil :")." il faut utiliser uniquement des syles externes (définis dans un fichier .CSS) " ;
echo " comme notre fichier ".href("std.css").". " ;
finp() ;
p("texte") ;
echo " Les ".b("formulaires")." fournissent aux pages Web une grande ".b("interaction avec l'utilisateur").". Il y a de nombreuses " ;
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 " ;
echo " formulaires et aux ".s_span("évènements","grouge")." (clavier, souris...) est d'utiliser un script ".s_span("Javascript","gvert") ;
echo " qui agit en local (même sans connexion " ;
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 " ;
echo " les traite, par exemple via un programme ".s_span("Php","gvert").". " ;
finp() ;
p("texte") ;
echo s_span("Javascript","gvert")." est un ".b("langage de programmation")." qui permet à l'utilisateur d'interagir " ;
echo " avec la page Web via le navigateur. " ;
echo " Au niveau le plus élémentaire on peut s'en servir pour afficher un " ;
echo " message, pour tester une valeur dans un formulaire ou effectuer une opération simple " ;
echo " comme une multiplication, une conversion d'unités... " ;
echo " A un niveau plus avancé, Javascript permet de faire des ".b("boucles").", de traiter des morceaux entiers de page Web, " ;
echo " d'".b("ajouter, supprimer ou modifier dynamiquement")." tous les éléments d'une page et/ou leurs attributs. Cela se " ;
echo " fait via le repérage des éléments dans le cadre du modèle informatique (objet) du document nommé ".s_span("DOM","gvert").". " ;
echo " Il faut maitriser la notion de variable, d'affectation, de test et de boucle en Javascript avant " ;
echo " d'approfondir la notion de tableau, d'objet puis d'évènement pour être capable de " ;
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 " ;
echo " correspondent aux éléments et les étiquettes aux attributs. Une gestion objets de cet arbre en Javascript est donc «naturelle»." ;
finp() ;
p("texte") ;
echo b("Remarque :")." dans un formulaire (élément ".b("form")."), l'attribut ".b("action")." est obligatoire. " ;
echo " Pour que le navigateur n'utilise pas cette \"action\", on utilisera un ".b("return false")." de " ;
echo s_span("Javascript","gbleuf")." associé à l'évènement ".b("onsubmit")." (pas onclick)." ;
finp() ;
blockquote() ;
div("bgcolor_jaunef_encadre") ;
p() ;
nbsp(5) ;
echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
echo href("cssprop.php","cssprop","nou") ;
nbsp(5) ;
echo " ; 2. ".href("http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html","css (siteduzero)","nou") ;
nbsp(5) ;
echo " ; 3. ".href("envois.php","envois","nou") ;
echo "." ;
finp() ;
findiv() ;
finblockquote() ;
finblockquote() ;
#########################################################
crs(3) ;
#########################################################
blockquote() ;
p("texte") ;
echo "Pour que ". s_span("Javascript","gvert")." puisse agir sur les éléments, le document doit être ".b("bien formé")." et " ;
echo b("valide").". Pour accéder à un élément unique, via son attribut ".b("id")." (qui doit être lui aussi unique), " ;
echo " on utilise ".s_span("document.getElementById","gbleuf")." (notez qu'il n'y a pas de ".b("s")." à Element). " ;
echo " Par contre, pour gérer plusieurs éléments de même nature il faut appeler la fonction " ;
echo s_span("document.getElementsByTagName","gbleuf").", " ;
echo " (notez qu'il y a un ".b("s")." à Elements). " ;
echo " On peut ensuite consulter les attributs d'un élément avec " ;
echo s_span("getAttribute","gbleuf")." ou les changer avec " ;
echo s_span("setAttribute","gbleuf").". La création d'élements passe par " ;
echo s_span("createElement","gbleuf")." et " ;
echo s_span("createTextNode","gbleuf")." ; on peut ensuite insérer ces éléments avec " ;
echo s_span("appendChild","gbleuf")." et " ;
echo s_span("insertBefore","gbleuf").". " ;
echo "Bien sûr, ".s_span("createAttribute","gbleuf")." permet de créer un attribut." ;
finp() ;
p("texte") ;
echo "Un document XHTML bien formé et valide est structuré en tant qu'" ;
echo s_span("arbre informatique enraciné étiqueté","grouge")." dont les ". s_span("noeuds","grouge") ;
echo " sont les ".b("éléments")." et les ". s_span("étiquettes","grouge")." correspondent aux ".b("attributs").". " ;
echo " A l'aide de ". s_span("Javascript","gvert").", il est possible de passer en revue par boucle ou " ;
echo " récursivement tous les sous-éléments d'un noeud ou d'un sous-arbre. " ;
finp() ;
p("texte") ;
echo "Pour bien programmer en ". s_span("Javascript","gvert")." il faut connaitre " ;
echo " les ".s_span("objets","grouge")." standard dans et hors du ".s_span("DOM","gbleuf").". " ;
echo " Il faut s'entrainer à utiliser les méthodes spécifiques " ;
echo " aux objets et savoir passer en revue les contenus." ;
finp() ;
blockquote() ;
div("bgcolor_jaunef_encadre") ;
p() ;
nbsp(5) ;
echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
echo href("../tuteurs/domsimple.htm","DOM simple","nou") ;
nbsp(5) ;
echo " ; 2. ".href("../tuteurs/testdom.htm","testdom","nou")."." ;
nbsp(5) ;
echo " ; 3. ".href("montresource.php?nomfic=sorttable.js","triTableaux","nou")."." ;
finp() ;
findiv() ;
finblockquote() ;
finblockquote() ;
#########################################################
crs(4) ;
#########################################################
blockquote() ;
p("texte") ;
echo "Comme pour tout langage de programmation, " ;
echo s_span("Javascript","gvert") ;
echo " impose de bien réfléchir avant d'écrire du code. " ;
echo " En particulier, écrire un algorithme des actions à effectuer, dessiner même grossièrement au brouillon " ;
echo " l'interface ou le ".em("design")." des pages permet de bien nommer les variables, les éléments, " ;
echo " de penser aux attributs, aux id, de simuler et tester " ;
echo " la ".b("perfection des parties")." pour obtenir la ".b("cohésion")." et la ".b("cohérence de l'ensemble")."." ;
finp() ;
p("texte") ;
echo "Le ".em("debugage")." et la ".em("mise au point des programmes")." peut se faire à l'aide d'une " ;
echo b("console d'erreur standard")." du navigateur ou des zones de dialogue dans la page, qu'on masque une fois le programme terminé." ;
echo " On peut aussi utiliser la console de Firebug à l'aide de ".b("console.debug(...)").". " ;
echo " L'ajout de commentaires dans le code-source de même que le recours systématique à des " ;
echo " sous-programmes (fonctions) est une pratique obligatoire de façon à produire un code \"propre\" et \"robuste\"." ;
finp() ;
p("texte") ;
echo href("../tuteurs/tutxml.htm",s_span("XML","gvert"),"nou") ;
echo " est à la fois un modèle général, une technologie et un sur-ensemble de XHTML. Couplé à " ;
echo s_span("Javascript","gvert") ;
echo ", " ;
echo s_span("XML","gvert") ;
echo " peut fournir des pages réactives en \"Web 2.0\" via ce qu'on nomme " ;
echo href("../tuteurs/tutajax.php",s_span("AJAX","grouge"),"nou") ;
echo "." ;
finp() ;
blockquote() ;
div("bgcolor_bleum_encadre") ;
p() ;
nbsp(5) ;
echo s_span("Pages à lire et à étudier","gbleuf")." : 1. " ;
echo href("http://wipos.p.lodz.pl/zylla/games/hanoi5e.html","hanoi5e","nou").", " ;
nbsp(3) ;
echo href("hanoi/hanoi.htm","hanoi.htm","nou").", " ;
nbsp(3) ;
echo " et " ;
nbsp(3) ;
echo href("hanoi/hanoi.xml","hanoi.xml","nou") ;
nbsp(5) ;
echo " ; 2. tuteurs " ;
echo href("../tuteurs/tutxml.htm","xml","nou").", " ;
nbsp(3) ;
echo href("orbit_js.svg","orbites","nou") ;
echo " et " ;
nbsp(3) ;
echo href("../tuteurs/tutajax.php","ajax","nou")."." ;
finp() ;
findiv() ;
finblockquote() ;
finblockquote() ;
#########################################################
h2("Au final :" ) ;
blockquote() ;
ol() ;
debutli() ;
p("texte") ;
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é " ;
echo " sous réserve que les pages soient ".b("bien formées")." et ".b("valides").". " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo s_span("CSS","gvert")." permet une mise en forme propre et commune aux différentes pages via des " ;
echo b("styles")." définis dans des fichiers externes communs ; " ;
echo "CSS assure un affichage précis voire esthétique de chacun des morceaux de la page via l'attribut " ;
echo s_span("class","gbleuf")." et l'élément " ;
echo s_span("span","gbleuf")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo s_span("JAVASCRIPT","gvert")." est un langage de programmation à " ;
echo b("objets") ;
echo " qui fournit une gestion et un controle dynamique de la page, " ;
echo " ce qui permet d'avoir une page \"réactive\". Javascript accède aux éléments, à leur attributs et permet " ;
echo " de les modifier, supprimer ou ajouter tout ou partie d'une page Web. " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo s_span("XML","grouge").", c'est « la cour des grands », avec des grammaires " ;
echo b("DTD")." et ".b("XSD")." pour " ;
echo " garantir et valider les contenus, des actions ".b("XSL")." pour transformer " ;
echo " dynamiquement l'arbre des éléments sur le serveur ou à la volée par le navigateur. ".b("XML")." est " ;
echo " LE format d'".b("interopérabilité")." d'aujourd'hui. Ainsi le X des fichiers .docx dans Microsoft Word " ;
echo " est mis pour XML..." ;
finp() ;
finli() ;
finol() ;
pvide() ;
finblockquote() ;
p() ;
echo href("montresource.php?nomfic=l2_crs.php","Code-source de cette page","orange_stim nou") ;
finp() ;
#########################################################
#########################################################
finSection() ;
finPage() ;
?>
La coloration syntaxique est réalisée par : SyntaxHighlighter. Si vous préférez, vous pouvez utiliser celle de geshi ou même celle construite autour de la fonction highlight_file. |
Retour à la page principale de
(gH)