SUPPORTS ET DOCUMENTS DE COURS
Développement Web L2
(Faculté des Sciences d'Angers)
gilles.hunault "at" univ-angers.fr
Documents à consulter
- [GH] sensibilisation aux pages Web ;
- [GH] tuteur pour le langage Javascript ;
- développement Web, cours de Caroline DEVRED ;
- SELFHTML, un site de référence ;
- technologie internet, un cours plus détaillé avec plus de références.
- référence XHTML
- référence CSS
Documents à imprimer
Ce que vous devez avoir retenu du cours numéro 1
La structure et la mise en forme des éléments d'une page Web (dont les liens hypertextes et les formulaires) se définissent par des balises qui utilisent les symboles < et > qu'on appelle des marqueurs. Pour écrire des caractères spéciaux, on utilise des entités repérées par les symboles & et ;. Les balises délimitent ces éléments et elles s'écrivent de façon stricte selon des règles précises définies par une grammaire (doctype). Les principaux éléments, assez peu nombreux, sont : html head title body h1 h2 div p ol ul li table th tr td a img span. Il y a des règles à respecter pour que les navigateurs (Internet Explorer, Firefox, Opera...) soient capables d'interpréter correctement ces éléments et leur mise en forme. La balise ouvrante d'un élément peut contenir un ou plusieurs attributs qui utilisent le format nom_d_attribut="valeur_d_attribut", comme par exemple dans <td align='right'> ou dans <span class='papagilles'>.
Rappel : il ne faut jamais hésiter à consulter le "code-source" d'une page.
La différence entre un document classique et une page Web passe entre autres par les couleurs, images, liens hypertextes et formulaires. Il y a des éléments en ligne et d'autres en blocs (ou "boites"). Les divisions et les paragraphes, ainsi que les listes et les tableaux permettent de structurer le document en éléments et sous-éléments. La mise en forme des éléments (gras, couleur, marges...) se fait à l'aide d'attributs et de propriétés CSS et il y en a beaucoup en CSS 1 et 2. On associe à des propriétés ou des groupes de propriétés des noms de style qui s'utilisent via l'attribut class et l'élément span. Définir des styles permet d'avoir des noms pour des mises en forme communes, de fournir un aspect homogène au long des pages.
Pour "bien" écrire des pages Web, il faut commencer par écrire le texte "au kilomètre", puis penser à la structure (découpage en éléments) et enfin ajouter les attributs et les styles pour la mise en forme. Chaque page écrite dans le cadre de ce cours doit être valide pour la grammaire nommée strict car sinon, il n'est pas garanti qu'on puisse accéder aux éléments de la page.
Pages à lire et à étudier : 1. Rex Swain's HTML Sampler ; 2. eltatt.
Ce que vous devez avoir retenu du cours numéro 2
Il y a assez peu d'éléments en XHTML et il est assez facile de s'y retrouver avec un peu d'entrainement. Il y a beaucoup d'éléments en CSS et on peut s'y perdre. De plus, les rendus ne sont pas toujours les mêmes suivant les navigateurs. Il faut donc rester prudent(e) avec CSS, surtout qu'on peut écrire des styles à la volée, 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 grammaire utilisée.
Conseil : il faut utiliser uniquement des syles externes (définis dans un fichier .CSS) comme notre fichier std.css.
Les formulaires fournissent aux pages Web une grande interaction avec l'utilisateur. Il y a de nombreuses façons de saisir un texte, un nombre, de faire un ou plusieurs choix... Une façon de réagir aux valeurs entrées dans les formulaires et aux évènements (clavier, souris...) est d'utiliser un script Javascript qui agit en local (même sans connexion à 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 les traite, par exemple via un programme Php.
Javascript est un langage de programmation qui permet à l'utilisateur d'interagir avec la page Web via le navigateur. Au niveau le plus élémentaire on peut s'en servir pour afficher un message, pour tester une valeur dans un formulaire ou effectuer une opération simple comme une multiplication, une conversion d'unités... A un niveau plus avancé, Javascript permet de faire des boucles, de traiter des morceaux entiers de page Web, d'ajouter, supprimer ou modifier dynamiquement tous les éléments d'une page et/ou leurs attributs. Cela se fait via le repérage des éléments dans le cadre du modèle informatique (objet) du document nommé DOM. Il faut maitriser la notion de variable, d'affectation, de test et de boucle en Javascript avant d'approfondir la notion de tableau, d'objet puis d'évènement pour être capable de gérer une page Web via Javascript. Au niveau conceptuel, une page Web est un arbre informatique étiqueté dont les noeuds correspondent aux éléments et les étiquettes aux attributs. Une gestion objets de cet arbre en Javascript est donc «naturelle».
Remarque : dans un formulaire (élément form), l'attribut action est obligatoire. Pour que le navigateur n'utilise pas cette "action", on utilisera un return false de Javascript associé à l'évènement onsubmit (pas onclick).
Pages à lire et à étudier : 1. cssprop ; 2. css (siteduzero) ; 3. envois.
Ce que vous devez avoir retenu du cours numéro 3
Pour que Javascript puisse agir sur les éléments, le document doit être bien formé et valide. Pour accéder à un élément unique, via son attribut id (qui doit être lui aussi unique), on utilise document.getElementById (notez qu'il n'y a pas de s à Element). Par contre, pour gérer plusieurs éléments de même nature il faut appeler la fonction document.getElementsByTagName, (notez qu'il y a un s à Elements). On peut ensuite consulter les attributs d'un élément avec getAttribute ou les changer avec setAttribute. La création d'élements passe par createElement et createTextNode ; on peut ensuite insérer ces éléments avec appendChild et insertBefore. Bien sûr, createAttribute permet de créer un attribut.
Un document XHTML bien formé et valide est structuré en tant qu'arbre informatique enraciné étiqueté dont les noeuds sont les éléments et les étiquettes correspondent aux attributs. A l'aide de Javascript, il est possible de passer en revue par boucle ou récursivement tous les sous-éléments d'un noeud ou d'un sous-arbre.
Pour bien programmer en Javascript il faut connaitre les objets standard dans et hors du DOM. Il faut s'entrainer à utiliser les méthodes spécifiques aux objets et savoir passer en revue les contenus.
Pages à lire et à étudier : 1. DOM simple ; 2. testdom. ; 3. triTableaux.
Ce que vous devez avoir retenu du cours numéro 4
Comme pour tout langage de programmation, Javascript impose de bien réfléchir avant d'écrire du code. En particulier, écrire un algorithme des actions à effectuer, dessiner même grossièrement au brouillon l'interface ou le design des pages permet de bien nommer les variables, les éléments, de penser aux attributs, aux id, de simuler et tester la perfection des parties pour obtenir la cohésion et la cohérence de l'ensemble.
Le debugage et la mise au point des programmes peut se faire à l'aide d'une console d'erreur standard du navigateur ou des zones de dialogue dans la page, qu'on masque une fois le programme terminé. On peut aussi utiliser la console de Firebug à l'aide de console.debug(...). L'ajout de commentaires dans le code-source de même que le recours systématique à des sous-programmes (fonctions) est une pratique obligatoire de façon à produire un code "propre" et "robuste".
XML est à la fois un modèle général, une technologie et un sur-ensemble de XHTML. Couplé à Javascript, XML peut fournir des pages réactives en "Web 2.0" via ce qu'on nomme AJAX.
Au final :
XHTML est le langage de description des pages qui permet d'avoir une structure dynamique exploitable en tant qu'arbre étiqueté sous réserve que les pages soient bien formées et valides.
CSS permet une mise en forme propre et commune aux différentes pages via des styles définis dans des fichiers externes communs ; CSS assure un affichage précis voire esthétique de chacun des morceaux de la page via l'attribut class et l'élément span.
JAVASCRIPT est un langage de programmation à objets qui fournit une gestion et un controle dynamique de la page, ce qui permet d'avoir une page "réactive". Javascript accède aux éléments, à leur attributs et permet de les modifier, supprimer ou ajouter tout ou partie d'une page Web.
XML, c'est « la cour des grands », avec des grammaires DTD et XSD pour garantir et valider les contenus, des actions XSL pour transformer dynamiquement l'arbre des éléments sur le serveur ou à la volée par le navigateur. XML est LE format d'interopérabilité d'aujourd'hui. Ainsi le X des fichiers .docx dans Microsoft Word est mis pour XML...
Retour à la page principale de (gH)
