420KEF – Élaboration d'applications dans un environnement graphique (AEG)

24 janvier

Au menu :

• plan de cours
• bases de JavaScript (avec parenthèses en C#, pour enrichir vos connaissances, en particulier celles acquises à la session précédente). Nous poursuivrons ceci lors des prochaines séances

Note personnelle : pour moi, ce cours en est à sa première incarnation. Il a été donné par le passé, mais à une autre session et jamais par moi. J'ai plusieurs idées, plusieurs projets, mais nous allons déterminer ensemble les contours de ce que représentera cette expérience collective pour vous et moi.

Je jongle avec des idées de :

• manipulation de polices de caractères
• applications composites (mashups)
• aventures côté client (jQuery, Angular.js) et serveur (Node.js)
• intégration d'API tierces (par Google, Yahoo, Twitter, etc.)
• utilisation d'appareils diversifiés pour l'affichage (ordinateurs conventionnels, tablettes, téléphones, etc.)
• manipulation du <canvas> avec HTML5
• communication par Websockets
• ... et ainsi de suite.

29 janvier

Au menu : un peu d'expérimentation avec JavaScript (rien de transcendant, juste de la gymnastique pour se remettre en forme).

Avant de débuter : faites-vous une petite page HTML5 de base (vous pouvez vous inspirer de celle-ci et l'adapter à votre goût, si vous le souhaitez), que vous pourrez dupliquer pour expérimenter avec chacun des exercices qui suivent. Ceci vous permettra d'être plus efficace par la suite.

Pour des détails de langage, vous pouvez examiner les liens suivants :

• ../../../Sujets/Web/index.html (page d'accueil pour divers liens sur le développement Web et mobile)
• ../../../Sujets/Web/JavaScript-Intro.html (quelques bases sur le langage JavaScript lui-même)
• ../../../Liens/Langages-programmation--Liens.html#langage_JavaScript (beaucoup d'infos et de pistes de diverses natures)

Exercice 0 : petit exercice simple. Créez une page HTML5 dans laquelle on trouvera :

• un gros titre (disons quelque chose dans une balise h1)
• une zone de texte (balise input avec type text), et
• un bouton de commande (balise input avec type button)

Lorsque l'usager cliquera sur le bouton, remplacez le texte dans le gros titre par celui dans la zone de texte.

Truc : utilisez une fonction JavaScript pour faire le remplacement. Pour que tout se passe bien, attribuez des id distincts aux éléments clés (la zone de texte et le gros titre), utilisez la méthode getElementById() du document représentant le DOM de la page Web, et remplacez le innerText du gros titre par le value de la zone de texte.

Exercice 1 : reprenez pour l'essentiel l'exercice 0 (copiez la page et faites des ajustements, disons) mais au lieu de simplement remplacer le texte du gros titre, remplacez-en le code HTML (utilisez innerHTML plutôt qu'innerText) et soulignez la première lettre de chaque mot. Pour les besoins de la cause, le début d'un mot sera le premier non-blanc au début du texte ou une séquence non-vide de caractères non-blancs précédée par au moins un blanc.

Truc : vous allez vouloir chercher le premier caractère blanc ou le premier caractère non-blanc à partir d'un certain point dans une chaîne de caractères. Je vous propose une stratégie (que vous pouvez mettre en application ou non; à vous de voir) :

• écrivez une fonction isSpace(c) retournant vrai seulement si c est un blanc (espace, tabulation, saut de ligne, etc.)
• écrivez une fonction négation(f) retournant une fonction g telle que g(x) est vrai seulement si f(x) est faux
• écrivez une fonction trouverSi(s,début,pred) prenant une chaîne de caractères s, une position début pour commencer à chercher, et un prédicat pred (un prédicat est une fonction booléenne). Cette fonction retournera la position du premier caractère c dans s à partir de début tel que pred(c) est vrai
• à l'aide de ces outils, chercher le début et la fin d'un mot deviendra beaucoup plus simple... Comprenez-vous pourquoi?

31 janvier

Au menu :

• retour sur l'exercice proposé à L01
• mutabilité et immuabilité
• pensée fonctionnelle (introduction)
• penser en termes d'algorithmes, de fonctions et de foncteurs

5 février

Au menu :

• début du travail sur le TP00, le petit éditeur de code v. 0a

7 février

Au menu :

• Q00
• introduction aux schémas de conception, avec le schéma de conception observateur
• bases de HTML (l'utiliser, mais sainement). En particulier, quoi conserver d'un exemple comme celui-ci et de quoi il vaut mieux s'inspirer, sans plus
• bases de CSS
• impact de JavaScript sur les pages (exemple de $T_{E^X}$)

12 février

Au menu :

• poursuite du travail sur le TP00, le petit éditeur de code v. 0a

14 février

Au menu :

• Q01
• brève discussion à propos des pointeurs de fonctions et des délégués, en réponse à une question de la classe
• entreposer des états partagés de manière contrôlée, et offrir des services « globaux » : le schéma de conception singleton
• le cas particulier d'un singleton en JavaScript

19 février

Au menu :

• suite et fin du travail sur le TP00, le petit éditeur de code v. 0a

21 février

Au menu :

• Q02
• discussion des tenants et aboutissants du TP00
• présentation du TP01
• démonstration d'un résultat possible
• quelques grands principes de programmation :
  • le principe YAGNI
  • le principe DRY

26 février

Au menu :

• travail sur le TP01, le petit éditeur de code v. 1a

28 février

Au menu :

• Q03
• introduction sommaire à jQuery
• introduction aux expressions régulières

12 mars

Au menu :

• travail sur le TP01, le petit éditeur de code v. 1a

14 mars

19 mars

Au menu :

• travail sur le TP01, le petit éditeur de code v. 1a

21 mars

Au menu :

• congé de minitest (bon retour de la relâche!)
• les URI
  • les URL
  • les URN
• le protocole http
  • nature du protocole
  • forces et faiblesses
• gestion des états
• témoins
• approche Ajax
• outils tiers pour JavaScript :
  • le http://javascript-minifier.com/ (il existe plusieurs outils qui font des trucs semblables, si celui-ci ne vous sied pas)
  • le http://www.javascriptlint.com/ (il y a une version en-ligne, si vous avez envie d'examiner la chose)
• survol bref d'ASP.NET
• petite introduction à Angular.js

26 mars

Au menu, brève pause du monde JavaScript :

• à titre formatif, votre mission est :
  • d'écrire un programme ASP.NET avec C# en arrière-scène
  • de faire en sorte que l'interface de votre programme présente au moins trois états de plusieurs enregistrements (p. ex. : le nom, le prénom et le salaire hebdomadaire d'un employé, et ce pour plusieurs employés; le nom, les points de vie et la puanteur d'un Orque, et ce pour plusieurs Orques; le sigle d'un cours, son nom, le nom du prof et votre notre finale dans ce cours, et ce pour plusieurs cours; ...)
  • de faire en sorte qu'en sélectionnant l'un des enregistrements, une mise à jour de l'affichage soit fait (p. ex. : en présentant des informations supplémentaires sur l'enregistrement sélectionné)
  • d'offrir au moins un contrôle (un bouton, par exemple) permettant de réaliser un calcul particulier sur les données (calculer le salaire salaire moyen? évaluer la puanteur minimale et maximale du lot? calculer votre note moyenne ?)

28 mars

Au menu :

• Q04
• petite exploration de l'importance de la Cache (rien qui ne soit au programme, mais ça répondait à des questions de la salle alors...)
• survol de la gestion des états avec ASP.NET :
  • variables de session
  • variables de vue
  • gestion du PostBack
  • témoins
• saine gestion des exceptions avec C# :
  • blocs try, catch et finally
  • blocs using et approche RAII
• généralisation des opérations évanescentes avec C# :
  • approche fonctionnelle
  • recours aux expressions λ

2 avril

Au menu :

• brève introduction à Node.js (pour le télécharger, voir http://nodejs.org/download/)
  • exemple simple (sorte de Hello World)
  • exemple sollicitant un minificateur de JavaScript
• le problème du Ajax entre sites
• la solution à envisager
• un indice de ce qui sera le prochain travail pratique...

4 avril

Au menu :

• quelques sujets divers, en réponse à des questions de la classe :
  • que signifie catch(...) en C++, et à quoi cela sert-il?
  • pourquoi être Exception-Safe?
  • pourquoi être Exception-Neutral?
  • comment exprimer des propriétés en C#?
  • en C++, quand (et où) est-il raisonnable de faire des using namespace? Quand (et où) est-il préférable de faire des using à la pièce, ou de ne pas en faire du tout?
  • en prime : pourquoi est-il préférable de ne jamais inclure <iostream> dans un fichier d'en-tête (un .h), et de préférer y inclure <iosfwd>?
• survol du format JSON
• examen plus en détail de ce que sera le prochain TP, qui sera manifestement le dernier avant le TP intégrateur

Parmi les thématiques survolées pour le prochain TP, on trouve :

• l'encodage Base64 :
  • pour éviter que quelques symboles particuliers du code source JavaScript (p. ex. : le +) ne soient transformés en cours de route, un encodage Base64 est appliqué sur envoi, et un décodage Base64 symétrique est appliqué, symétriquement, sur réception
  • dans une fenêtre de fureteur, des méthodes atob() et btoa() sont offertes pour ces deux opérations. Dans node.js, ces méthodes n'existent pas, mais elles peuvent être implémentées très simplement
• la communication Ajax entre domaines :
  • cette forme de communication est interdite par le fureteur, pour votre propre sécurité
  • pour la contourner, il est possible de modifier un serveur Web pour qu'il indique au fureteur qu'il accepte de collaborer à une telle forme de communication
  • il est aussi possible de faire du CORS, ou Cross-Origin Resource Sharing, mais il faut typiquement contrôler le serveur pour permettre cette fonctionnalité, ou d'utiliser JSONP si le serveur collaborait en ce sens
  • faute d'avoir ces privilèges, votre chic prof propose d'utiliser un serveur Web sous node.js qui servira de relais entre le client (votre outil) et les services disponibles sur le Web que vous souhaiterez y intégrer
  • donnant l'exemple d'un service de minification offrant une API par http, il montre que si le serveur node.js est sur le même domaine que le demandeur, il devient possible pour le demandeur d'y faire une requête Ajax alors que le serveur node.js, qui n'est pas contraint par le fureteur, relaie les requêtes à un service tiers, puis relaie les réponses de ce service vers le demandeur original

11 avril

Au menu :

• retour sur le TP01 :
  • programmer et écrire : dans quel ordre procéder?
  • identifier le couplage (pertinent ou superflu)
  • faible couplage et forte cohésion : comment y arriver?
  • standardiser la nomenclature
  • identifier les points se prêtant à un découpage
  • quand lier avec le DOM et quand se restreindre à des variables du programme?
  • le rôle du « sinon »
  • intérêt d'explorer l'API d'un langage (p. ex. : split() et join())
  • ne pas négliger CSS pour le formatage (pensez sémantique!)
  • l'importance des commentaires... judicieux!
• présentation formelle du TP02 (même si l'énoncé est encore légèrement incomplet)

Truc scout : si vous avez beaucoup de cas à couvrir, vous pouvez remplacer une série de if ... else ... par un tableau de fonctions :

// ... ceci doit n'être fait qu'une seule fois (dans un singleton?)
var options = new Array();
options[8] = traiterBackspace; // on suppose qu'une fonction de ce nom a été définie plus haut
options[10] = traiterReturn;   // idem
options[13] = traiterReturn;   // idem
// etc.
function traiterTouche(touche) {
   if(options[touche] != null) { // ou quelque chose du genre
      options[touche](); // appeler la fonction (on pourrait lui passer la touche en paramètre si c'est préférable)
   }
} // bingo: on passe de plusieurs pages de code à quelques lignes!

16 avril

Au menu :

• travail sur le TP02
• l'exemple complet de relais pour service de minification est en ligne

J'avais prévu vous soumettre deux minitests cette semaine, mais le temps manque (et j'ai pas chômé!). Ainsi, je me limiterai à deux questions pratiques, à faire sur une base individuelle.

La Q05 va comme suit :

• écrivez une fonction JavaScript prenant en paramètre une chaîne de caractères et retournant un objet JSON contenant un tableau des mots trouvés dans la chaîne de caractères (un mot étant une séquence de caractères délimitée par des blancs... Une expression régulière pourrait être pertinente ici!)
• par exemple, si la fonction reçoit "J'aime mon prof $a@3!", elle doit retourner un objet JSON comme le suivant :

{
   mots : [ "J'aime", "mon", "prof", "$a@3!" ]
}

Autre exemple, si la fonction se nomme JSONinifer et si le JSON retourné suite le format ci-dessus, alors le programme suivant...

function test() {
   var s = "J'aime    mon\tprof! \n$a@3! t'sais genre...";
   var res = JSONifier(s);
   alert('"' + res.mots[2] + '"');
}

...affichera "prof!".

La Q06 va comme suit :

• écrivez une fonction JavaScript prenant un objet JSON tel que celui retourné par la fonction proposée en réponse à Q05 ci-dessus, et qui retourne une chaîne de caractères comprenant chacun des mots du tableau de mots, séparés par le symbole '/'.

23 avril

$L11\frac{1}{2}$

Au menu :

• travail sur le TP02

25 avril

Au menu :

• Q07
• Le design adaptatif, ou Responsive Design :
  • http://en.wikipedia.org/wiki/Responsive_web_design
  • http://www.journaldunet.com/developpeur/client-web/responsive-design/
  • un exemple dynamique : http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
• On y arrive typiquement avec des Media Queries en CSS :
  • http://www.w3.org/TR/css3-mediaqueries/
  • http://en.wikipedia.org/wiki/Media_queries
  • un texte qui présente des exemples clairs : https://developer.mozilla.org/fr/docs/CSS/Media_queries
  • comment en profiter et choisir les documents CSS à inclure en fonction du média de présentation : http://css-tricks.com/css-media-queries/
• Pour un exemple complet mais très laid, voir Exemple-Design-Adaptatif.html
• Poutine de considérations culturelles :
  • ordre de lecture des éléments visuels?
  • chiffres chanceux?
  • une image vaut mille mots?
  • valider de manière explicite (sur confirmation) ou implicite?
  • découplage de la présentation et de l'implémentation?
  • découplage de l'implémentation et de la communication?
  • application Web, application native : les pour et les contre

2 mai

Au menu :

• Prototypage rapide :
  • Visual Studio, Netbeans et autres
  • des trucs comme http://balsamiq.com/ qui est chouette, mais payant...
  • Le « pendant prototypage »
  • Le « après prototypage »
  • Relation avec la programmation en général
• Tester sur des humains :
  • dans un milieu de recherche
  • dans un laboratoire d'interfaces personne/ machine de grande envergure
  • $\beta$-tests (et la philosophie Web 2.0)
• Tests A/B :
  • on a deux options, habituellement l'option dite « de contrôle » (existante, connue) et l'option dite « de traitement » (remplacement potentiel pour l'option de contrôle)
  • des usagers choisis en fonction des besoins (typiquement : stratégie pseudoaléatoire dans une population cible) sont sélectionnés
    • une moitié se fait proposer l'option de contrôle
    • l'autre moitié se fait proposer l'option de traitement
  • le taux de succès de part et d'autre est quantifié
  • les aberrations statistiques sont évacuées
  • l'une ou l'autre des options est choisie
• Tirer des statistiques d'utilisation :
  • le classique Google Analytics (voir http://en.wikipedia.org/wiki/Google_Analytics pour un Wiki)
  • trucs plus mineurs (par exemple http://whos.amung.us/ ou http://clustrmaps.com/fr/index.htm)
• Bref sur MVC et MVVM

9 mai

Au menu :

• le schéma de conception Commande :
  • implémenter un système d'annulation et de réexécution (Undo/ Redo)
  • implémenter un système de macros
• à titre de Q08 :
  • regardez la présentation de Raphael Goetter (bien gentil, mais qui n'est pas un prof au sens de ce à quoi nous vous avons habitués au Collège) sur http://www.microsoft.com/france/mstechdays/programmes/2014/fiche-session.aspx?ID=0d8d1d74-e5ee-4785-9424-42602cab0c13, présentation qui dure un peu plus d'une trentaine de minutes
  •  écrivez un texte dans lequel vous expliquerez cinq manières distinctes (un point chacune) par lesquelles CSS3 facilite le travail de design adaptatif (Responsive Design) pour une application concrète de votre choix. Vous n'aurez les points que si vous expliquez l'utilité de la caractéristique que vous présentez, exemple à l'appui (se limiter à la nommer ne suffira pas)
  • envoyez votre réponse par Colnet à votre chic prof au plus tard dimanche le 11 mai 2014 à 17h

15 mai

Au menu :

• prendre conscience de l'A.S.
• travail sur le TP02

16 mai

Au menu : on remplace le cours théorique par un cours pratique. Vous pouvez me rejoindre en tout temps par courriel.

Le minitest Q09 est disponible ici : 420KEF--Q09.pdf

Les consignes données par Colnet sont répétées ci-dessous. Petit détail à ne pas oublier : si une ligne (ou une colonne) comprend plusieurs mots, vous trouverez plusieurs définitions, une par mot. Chaque définition débute par un caractère gras.

21 mai

À déterminer

Consignes du TP00

Consignes du TP01

Consignes du TP02

Vous trouverez ici les consignes de l'activité synthèse pour la session H2014

TP00

TP01

À déterminer

À déterminer