Déroulement réel des cours

La « pensée » du Dilun, d'an 20 a viz Du 2017 , 23h42m16s :
Si ça ne se mange pas et si ça ne baise pas, pisse dessus.
  -- Proverbe chien

Semaine du joudi 28 janbier 2016 : TD n°1 (Cumul=3h)

Quelques informations
  • LA page du cours : http://grappa.univ-lille3.fr/~gonzalez/enseignement/2015-2016/enquete/.
  • Le site des enquêtes
  • Le poly HTML/CSS.
  • Déroulement des cours :
    • Jeudi 14 janvier (semaine 1) : [Début cours socio]
    • Jeudi 21 janvier (semaine 2)
    • Jeudi 28 janvier (semaine 3) : TD 1, HTML/CSS, début de la présentation
    • Jeudi 4 février (semaine 4)
    • Jeudi 11 février (semaine 5) : TD 2, mise en ligne de la présentation
    • Jeudi 18 février (==== VACANCES =====)
    • Jeudi 25 février (semaine 6) : TD 3, début du cours sur les formulaires
    • Jeudi 3 mars (semaine 7)
    • Jeudi 10 mars (semaine 8) : TD 4, réalisation du formulaire
    • Jeudi 17 mars (semaine 9) : TD 5, lire les résultats ⇆ corrections/améliorations
    • Jeudi 24 mars (semaine 10) : TD 6, mise en ligne du formulaire
    • Jeudi 31 mars (semaine 11) : TD 7, derniers réglages/lire les résultats
    • Jeudi 7 avril (==== VACANCES =====)
    • Jeudi 14 avril (==== VACANCES =====)
    • Jeudi 21 avril (semaine12) :
    • Jeudi 28 avril (semaine13) : TD 8, clôture du questionnaire et mise en ligne de l'analyse
  • Modalités de contrôle :
    • une note pour la présentation,
    • une note pour le questionnaire,
    • une note pour le rapport.
  • Présentation rapide de (x)HTML : origine, les balises, structure d'un document, respect des normes.
  • Les extensions de Firefox :
  • Les thèmes de Firefox :
Acid Test :
Si vous ne comprenez pas pourquoi les informaticiens vous cassent la tête en essayant de vous expliquer qu'Internet Explorer c'est vraiment pas bon, utilisez l'Acid Test, pour tester la compatibilité de votre navigateur avec les standards du W3C (l'organisme mondial chargé d'élaborer et de gérer les standards du web) : Réalisation de la page de présentation : HTML5
  • Principe : éditeur de texte, code source « à la main ».
  • En-tête d'une page HTML5 : pour passer les tests du W3C une page doit avoir la structure suivante :
    <!DOCTYPE html>
    <html>
      <head lang="fr">
        <meta charset="utf-8">
        <title>Un titre si possible intelligent...</title>
      </head>
      <body>
        ....
        ....
      </body>
    </html>
    
    À comparer avec celle nécessaire pour xHtml visible dans la section 2.5 du poly.
    Contrairement à xHTML, l'utilisation des majuscules & minuscules n'est pas différenciée en HTML5.
  • Quelques balises de base (dans leur version la plus simple) valables dans toutes les versions de (x)HTML(5): <h1>, <h2>, etc., <p>, <ul>, <ol>, <li>, <span>, <div> (section 2.6 du poly).
Règles de typographie, à lire CSS
Dernière modification : 25/8/2016

Semaine du joudi 11 fébrier 2016 : TD n°2 (Cumul=6h)

Les noms de vos fichiers
Les fichiers de présentation (HTML, CSS, images, etc.) de tous les groupes sont tous dans le mêmes dossier. Pensez à ne pas utiliser de nom trop courants pour qu'il n'y ait pas conflit. Par exemple, c'est sans doute une mauvaise idée d'appeler votre feuille de style style.css.
Vous pouvez par exemple préfixer tous vos fichiers par le nom de votre équipe.

Règles de typographie, saines lectures HTML5
  • Nouveautés en HTML5 : nous nous concentrerons sur les nouvelles balises qui apportent de la sémantique au texte. Vous pourrez comprendre la philosophie derrière HTML5 en vous polongeant dans le livre Dive into HTML5 : http://diveintohtml5.info/. (Voir la page https://fr.wikipedia.org/wiki/HTML5 pour une simple liste de toutes les nouveautés.)
    • main : Définit le contenu principal de la page, il doit être unique dans la page.
    • section : Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
    • nav : Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
    • article : Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
    • aside : Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
    • hgroup : La balise <hgroup> n'existe plus en HTML5. Eh oui, ce sont des choses qui arrivent quand on travaille sur un truc pas entièrement finalisé.
    • mark : Définit un texte marqué. Surligneur de texte.
    • header : Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
    • footer : Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

    Vous trouverez sur le web de nombreuses images illustrant l'utilisation de ces balises, comme par exemple celle-ci qui provient de Alsacréation :

    Imbication des balises de base en HTML5

    Inconvénients : elles ne sont pas forcément compatibles avec tous les navigateurs... En particulier les anciens, et en particulier toutes les anciennes versions de IE jusqu'à IE8 compris. Visitez http://html5test.com/ pour connaître le niveau de compatibilité de votre navigateur.

    Vous pouvez tester l'affichage dans les différents navigateurs sur le site de IE NetRenderer.
    Vous pouvez aussi installer l'extension ie-netrenderer pour Firefox qui simplifie l'utilisation de NetRenderer.

    On verra plus tard comment contourner le problème de la compatibilité avec IE.

  • On verra dans un prochain cours ce qu'apporte HTML5 aux formulaires.
Gestion des couleurs en HTML (et CSS) CSS
  • Feuille de style, séparation données-présentation, syntaxe d'une feuille de style.
  • Premier essai : sans CSS et avec CSS.
  • Inclusion d'une feuille de style dans une page web (version simplifiée) :
    <link rel="stylesheet" href="fichier" />
  • Premières propriétés : background, color, margin, padding, text-align.
  • Formulaires pour générer des CSS :
  • Appliquer un style de CSS : chapitre 7 du poly.
  • Liste des éléments : chapitre 8 du poly.
  • Des utilitaires CSS : voir le chapitre 12 du poly.
  • Positionnement et affichage avec les CSS : voir le chapitre 13 du poly.
Dernière modification : 25/8/2016

Semaine du joudi 25 fébrier 2016 : TD n°3 (Cumul=9h)

  • Chapitre 6. Formulaires.
  • Premiers exercices : tester les différents contrôles en utilisant le traitement de la page http://grappa.univ-lille3.fr/~gonzalez/prog/form01.php (attribut action) :
    • input : text, submit, hidden, reset, password, checkbox, radio ;
    • select ;
    • textarea  ;
    ainsi que les méthodes post et get.
    Vos pages doivent toujours réussir les contrôles du W3C.
  • HTML5 et les navigateurs pas doués
    La plupart des navigateurs anciens se contenteront de n'associer aucun style aux balises nouvelles de HTML5. Vous pouvez résoudre le problème en stylant toutes les nouvelles balises (section, header, footer, etc.), en particulier en leur attribuant un « display:block; ».
    Pour ce qui est d'Internet Explorer, c'est plus compliqué. (Vous êtes étonnés, vous ? Moi pas...)
    Internet Explorer refusera tout simplement de leur appliquer un style, même si vous faites tout ce qu'il faut pour.
    Pour contourner le problème il existe deux scripts javascript qui vont vous sauver.
    Pour les utiliser :
    1. Vous les téléchargez et vous les recopiez dans vos répertoires :
    2. Vous ajoutez dans votre page HTML5, juste avant </head> :
          <!--[if lt IE 9]>
            <script src="html5shiv.js"></script>
            <script src="html5shiv-printshiv.js"></script>
          <![endif]-->
    Cela aura pour effet de forcer Internet Explorer à reconnaître les nouvelles balises, et les styles que vous aurez définis pourront alors s'appliquer.
  • Formulaires et HTML5
    HTML5 ajoute un certain nombre de contrôles pour les formulaires. (Vous pouvez les tester.)
    Les navigateurs qui ne savent pas les utiliser correctement se contenteront de les traiter comme un input de type text.
    Sauf mention contraire les versions récentes de Opera, Chrome et Firefox savent les utiliser correctement.
    1. Message d'invite dans un input :
      <input name="c0" placeholder="Veuillez remplir SVP">
    2. Autofocus sur n'importe quel contrôle :
      <input name="c1" autofocus>
    3. Saisie d'un email, avec contrôle (simple) de saisie :
      <input name="c2" type="email">
    4. Saisie d'une URL, avec contrôle (simple) de saisie :
      <input name="c3" type="URL">
    5. Saisir un nombre dans un certain intervalle :
      <input name="c4" type="number" min="0" max="10" step="2" value="6">
    6. Saisir un nombre avec un curseur :
      <input name="c5" type="range" min="0" max="10" step="2" value="6">
    7. Saisie d'une date :
      Plusieurs versions :
      <input name="c6" type="date">
      <input name="c7" type="datetime">
      <input name="c8" type="month">
      <input name="c9" type="week">
      <input name="c10" type="time">
      Fonctionne avec les versions récentes deOpéra, Chrome. Ne fonctionne pas pour l'instant avecFirefox.
    8. Choisir une couleur :
      <input name="c11" type="color">
    9. Champ obligatoire :
      <input name="c12" required>
  • Réalisation du questionnaire.
Dernière modification : 25/8/2016

Semaine du joudi 10 môrs 2016 : TD n°4 (Cumul=12h)

Réalisation du questionnaire, suite.
Dernière modification : 25/8/2016

Semaine du joudi 17 môrs 2016 : TD n°5 (Cumul=15h)

Réalisation du questionnaire
Une fois que votre questionnaire commence à tenir la route (pas avant, pour ne pas encombrer la base de données), vous pouvez commencer à le tester en vrai :
  • en utilisant le traitement de la page http://www.grappa.univ-lille3.fr/traitementdenquete/enregistrement.php,
  • avec la méthode post get,
  • avec un champ hidden de nom codenquete ayant pour valeur votre code d'équipe,
  • avec un champ hidden de nom promotion ayant pour valeur 2016.
Les résultats sont disponibles sur le tableau de bord.
Dernière modification : 25/8/2016

Semaine du joudi 24 môrs 2016 : TD n°6 (Cumul=18h)

Lire les résultats → corrections/améliorations.
Finalisation et mise en ligne du formulaire.
Dernière modification : 25/8/2016

Semaine du joudi 31 môrs 2016 : TD n°7 (Cumul=21h)

Commencer à analyser les résultats pour vérifier qu'ils sont facilement utilisables et interprétables.
Derniers réglages du formulaire si nécessaire.
Dernière modification : 25/8/2016

Semaine du joudi 28 averil 2016 : TD n°8 (Cumul=24h)

Mise en ligne de l'analyse.
Dernière modification : 25/8/2016
Dernière modification : 25/8/2016