Techniques et langages du WEB, accessibilité

Ce cours a pour objectifs de vous permettre de concevoir un site Internet statique tout en respectant les contraintes d'accessibilité, d'utiliser les technologies les plus récentes et les langages les plus avancés pour la représentation des contenus web, et de vous faire acquérir une méthodologie complète qui vous servira à analyser, concevoir, réaliser et auditer une solution web statique.

Cette page référencera divers contenus, en lien avec les supports de TPs, vous permettant a minima d'atteindre les objectifs du cours, et si vous vous sentez à l'aise de vous perfectionner.

Support de cours 2015-2016

Support de cours 2015-2016, version imprimable (mais vous ne devriez pas imprimer ce cours, c'est gaspiller du papier pour pas grand chose…)

Support de cours 2015-2016 AVEC les fichiers d'exemples: extraire l'archive, puis ouvrez le fichier pdf du cours avec un lecteur pdf capable de suivre les liens.

Cours de John Samuel sur CANVAS: supports, documentation et exemples

Archive des sujets de TPs Version du 6/10/2016

TP de John Samuel sur CANVAS

Total validator: pour fonctionnement en arrière plan avec l'extension Mozilla, lancer le script total_validator_listen.sh

Depuis septembre 2017, il n'y a plus de note sur les rendus de TPs.

Avant 2017: Vous avez la possibilité, SI VOUS LE SOUHAITEZ, de rendre vos TPs pour évaluation (note coeff 1 dans la note de TP finale).

Vous ne rendrez QUE le travail réalisé dans le cadre des rubriques “c'est à vous”.

Exemple d'archive à rendre: mascret-perrin-machin.zip

Il est toutefois impératif de respecter les consignes suivantes

Un travail est considéré comme classique si:

1. vous n'avez réalisé QUE des pages statiques (HTML, JS et CSS uniquement)
2. et/ou aucune de vos pages n'est générée via PHP

Dans ce cas, les consignes sont les suivantes:

1. Vous remettrez 1 (un) seul fichier archive (zip ou tar.gz uniquement) contenant l'ensemble des travaux demandés.
2. Vous respecterez l'architecture donnée dans l'exemple de rendu.
3. Toute page HTML et toute feuille css aura au préalable été testée, par totalvalidator en niveau AAA d'accessibilité et par cssvalidator (https://jigsaw.w3.org/css-validator) pour les css.
4. Vous enregistrerez la page web de résultat (comme dans l'exemple) dans le répertoire “eval” (voir l' archive d'exemple). Dans ce répertoire, les noms des fichiers seront ceux des pages html et des feuilles de style, hors extension. Vous pouvez soit enregistrer la page web complète (comme dans l'exemple), soit uniquement le code HTML (sans les fichiers associés: images, styles, etc.). Toute page non validée et n'étant pas dans ce dossier NE SERA PAS évaluée.
5. Le nom de votre archive sera nomBinome1-nomBinome2-etc.zip ou nomBinome1-nomBinome2-etc.tar.gz. Toute archive ne respectant pas cette syntaxe ne sera pas évaluée.
6. Enfin, vous ajouterez un fichier noms.txt contenant les noms et prénoms du binôme.
7. Il ne faut rendre qu'un seul fichier par groupe (un des membres du groupe remettra le fichier pour tout le groupe). Vous déposerez ces fichiers dans l'espace prévu à cet effet sur le site e-campus.

Un travail est considéré comme non classique si il n'est pas classique (Lapalisse).

C'est notamment le cas si vous avez été plus loin dans ce qui était demandé, et surtout si votre site génère une partie de ses pages dynamiquement (via PHP, templates, etc.).

Dans ce cas, les consignes sont les suivantes:

1. Vous remettrez 1 (un) seul fichier archive (zip ou tar.gz uniquement) contenant l'ensemble des travaux demandés.
2. Vous écrirez un petit fichier readme.txt que vous placerez à la racine de l'archive indiquant comment installer votre site web
3. Toute page web que vous souhaitez faire évaluer et toute feuille css utilisée aura au préalable été testée, par totalvalidator en niveau AAA d'accessibilité et par cssvalidator (https://jigsaw.w3.org/css-validator) pour les css.
4. Vous enregistrerez la page web de résultat (comme dans l'exemple) dans le répertoire “eval” (voir l'archive). Dans ce répertoire, les noms des fichiers seront ceux des pages html et des feuilles de style, hors extension. Vous pouvez soit enregistrer la page web complète (comme dans l'exemple), soit uniquement le code HTML (sans les fichiers associés: images, styles, etc.). Toute page non validée et n'étant pas dans ce dossier NE SERA PAS évaluée.
5. A la racine de l'archive, vous réaliserez un fichier “map.txt”; chaque ligne de ce fichier contiendra le nom de la page web résultat du point précédent, une tabulation, puis l'URL à entrer dans le navigateur pour accéder à cette page, suivi éventuellement d'une autre tabulation et ensuite d'explications en cas de contexte particulier (utilisateur devant être connecté par exemple).
6. Le nom de votre archive sera nomBinome1-nomBinome2-etc.zip ou nomBinome1-nomBinome2-etc.tar.gz ; toute archive ne respectant pas cette syntaxe ne sera pas évaluée.
7. Enfin, vous ajouterez un fichier noms.txt contenant les noms et prénoms du binôme.
8. Il ne faut rendre qu'un seul fichier par groupe (un des membres du groupe remettra le fichier pour tout le groupe). Vous déposerez ces fichiers dans l'espace prévu à cet effet sur le site e-campus.

Je vous recommande, une fois votre archive réalisée, de tester vos pages sur une autre machine, et dans l'idéal sur un autre compte, sous linux. Vous corrigerez ainsi d'éventuelles erreurs de lien, de nom de fichier (majuscules, minuscules, espace, accents…).

Annales et qcm

Mise à jour: 13/11/2016

Attention: suivant l'enseignement que vous avez suivi, les tests proposés peuvent traiter de sujets que vous n'avez pas vu ou au contraire ne pas évoquer certains points vus en cours et TP.

Ces guides ont été réalisés à partir de sources officielles du NET et recompilés par mes soins. Ils ne sont PAS exhaustifs, pour la liste complète consultez les sources mentionnées.

Guide rapide HTML, ARIA, SQL et sélecteurs CSS.

Guide de survie: le guide de syntaxe augmenté de deux planches récapitulatives.

Les élèves passant un test dans le cadre de mon cours AURONT ce guide fourni en version papier.