didiode

Le barème indiqué est provisoire.

CSS (3 points)

Il y avait plusieurs versions différentes. Je n’en reprends que quelques unes

à venir…

XHTML (5 points)

Selon les sujets, il y avait trois fichiers différents pour cet exercice :

• html1-err.html et la version correcte, html1.html
• html2-err.html et la version correcte, html2.html
• html3-err.html et la version correcte, html3.html

XHTML + CSS (5 + 5 points)

Selon les sujets, il y avait trois fichiers différents pour cet exercice :

• css1.html
• css2.html
• css3.html

Attention, les solutions proposées sont celles qui ont permis de produire les captures d’écran mais on pouvait faire tout à fait autrement (par exemple, dans le css, utiliser des float au lieu de positionnements absolus, ou dans le html, ne pas utiliser de div mais prendre directement les blocs p et ul).

Par ailleurs, les erreurs d’interprétation dues à la mauvaise qualité de l’impression des captures d’écran ne sont évidemment pas pénalisantes (certains ont vu des bordures en pointillés, d’autres des list-style-type: square, tant que le css est correct, ça me va.)

Questions générales (5 points)

à venir…

En résumé

Il est question ici de trois choses :

1. jQuery, une bibliothèque de fonctions javascript qui permet de rendre dynamique un document html avec très peu de programmation
2. les formulaires en xhtml, pour permettre à l’utilisateur du site d’entrer des informations
3. une pincée de php, qui permet de programmer du côté serveur, notamment pour traiter les informations envoyées par l’utilisateur au moyen d’un formulaire

Le 1. et le 2. seront probablement vus en TP la semaine qui vient.

Seul le 2. sera au programme du partiel.

Le 3. sera probablement abordé la semaine suivante (juste après le partiel, donc.)

jQuery

Avant tout, rappelons que javascript permet de programmer des scripts qui seront exécutés par le client (le navigateur), donc sur la machine de l’internaute qui visite le site et non sur le serveur.
Le serveur envoie le code html, le css et le javascript sans les interpréter.

jQuery est une bibliothèque de fonctions (library en anglais) mise au point à partir de 2006 dans le but initial de manipuler facilement les propriétés css. D’où l’intérêt de vous en montrer les bases comme complément à l’apprentissage de css.

Pour démarrer

• lancer un script se fait généralement au moyen de la méthode

  $(document).ready()

• télécharger l’exemple simpliste jquery.html et tester les deux fichiers alert-ready.js et add-class.js (cet exemple est décrit dans un tutorial de la documentation de jquery).

L’idée de base et qui rend très facile l’utilisation de jQuery, c’est que pour manipuler un ou plusieurs éléments, on les désigne au moyen de sélecteurs selon la syntaxe css, comme suit:

$("div#menu a.ext").hide()

Dans cet exemple, on fait disparaître (voir les détails plus bas) tous les liens (éléments a) de classe ext dans le div d’identifiant menu.

Quelques méthodes simples

Pour des exemples plus significatifs, la documentation de l’API est très claire et fournit de nombreux exemples interactifs dont le code source se limite à quelques lignes (souvent de l’ordre de trois ou quatre).

• La doc
• pour manipuler les propriétés css (voir rubrique CSS de la doc), les méthodes
  • .addClass() (voir plus haut, exemple add-class.js)
  • .css(name, value)
  • .css({ 'name' : 'value', 'name' : 'value' , ... })
• pour gérer les événements (rubrique Events de la doc)
  • quelques exemples : .click(...), .mouseOver(), .hover(..., ...)
  • plus généralement :
    .bind('click', function() { ... })
    .unbind(), .unbind('click') etc.
• Quelques effets (rubrique Effects de la doc)
  • .hide('slow'), .show
  • .fadeIn() / Out

Les formulaires xhtml

Pour commencer

Voir le fichier formulaire.html.

Les principaux points à retenir dans cet exemple :

• il n’y a qu’un seul formulaire, défini par la balise form, et contenant plusieurs éléments de saisie
• l’élément label permet de sélectionner plus facilement un élément input: si on clique sur le label, l’input correspondant s’actionne (la correspondance est spécifiée au moyens des attributs for et id de label et input respectivement. Observez la différence entre les input Surnom et Prénom ;
• lorsque plusieurs input sont utilisés pour une même variable du formulaire, ils doivent être associés au moyen de l’attribut name (comme pour les boutons homme / femme)
• on envoie le formulaire au moyen de l’input de type submit
• Lorsqu’on clique sur homme et qu’on envoie le formulaire, cela a pour effet d’ajouter la chaîne "?sexe=homme" dans la barre d’adresse du navigateur. Ceci permettra de traiter le formulaire par la suite. Notez que les autres valeurs ne sont pas présentes

D’autres éléments de saisie

Voir les exemples donnés dans la liste de w3schools.

• cases à cocher
• listes d’options
• zones de texte
• etc.
• j’ajouterais aussi les input de type file
  (voir l’élément input pour une liste complète.)

Traitement d’un formulaire en PHP

A suivre…

Une page assez pratique sur CSS, en français :
selfhtml (sommaire de référence)

Précisions

Sur les unités de mesure et les couleurs, voir la rubrique de selfhtml.

• unités de mesure (absolues, relatives), px, em (largeur d’un M), ex (hauteur d’un x), %
• couleurs, coordonnées rgb, à un ou deux chiffres de 0 à f (#rgb ou #rrggbb)
• margin / border / padding
• pseudo-classes

Structure d’un document html

• En arbre (html contient head et body, qui
  lui-même contient des h1, des p etc.
• Éléments de type inline (en ligne), comme strong, a ou img, au mileu d’une ligne de texte, et éléments de type bloc, comme p, h1, ul etc., précédés et
  suivis d’un saut de ligne

Positionnement

• Flux de la page : blocs de haut en bas, les uns au-dessus des autres, occupant toute la largeur disponible, comme sur le dessin ici, emprunté au livre Tête la première HTML et CSS
  
• Pour faire sortir un bloc du flux, on peut utiliser la propriété float (valeurs possibles left, right, et la valeur par
  défaut, none) ou la propriété position. Le deux sont illustrées dans l’exemple des menus plus bas.

  La figure ci-dessous montre un exemple de div flottant (bleu) placé à gauche d’un paragraphe (noir) resté dans le flux normal.
  
  Attention : il faut prévoir de réserver la place à l’élément flottant en lui attribuant une largeur dans ses propriétés css, sinon l’élément qui le suit le recouvrira.

• Elément div : permet de définir un bloc, par exemple en vue de définir son positionnement au moyen de css
• Elément span : idem en inline (permet de définir une partie du texte à laquelle on attribuera des propriétés de style particulières)

Exemple des menus en listes

Le menu simple

Cet exemple est emprunté à Alsacréations, je vous recommande vivement la lecture complète de l’article (qui traite aussi de l’utilisation des images dans les menus).

• menu.html
• vertical.css
• horizontal-inline.css
• horizontal-float.css

Une page à la Facebook

• menus-fb.html
• fb.css

La structure du document est représentée sur la figure ci-dessous.

Bien noter :

• la différence entre les classes et les identifiants
• l’utilisation de la classe menu pour les div ET pour les ul
• l’imbrication des sélecteurs (#liens_ext div.menu h1) pour spécifier un (ou des) chemin(s) dans l’arbre.

xhtml

historique, syntaxe

css

présentation via csszengarden
syntaxe (sélecteurs, règles)
classes et identifiants xhtml