Aux nouvelles
Dernière semaine
Les ressources de la dernière semaine de cours sont disponibles. Nous aborderons les technologies XML. Pas de capsule, mais des transparents (et des ressources). N'hésitez pas à me poser des questions.
Mustache
Le sujet de la démo sur Mustache est disponible. Vous pouvez intégrer Mustache dans votre devoir #2.
Il n'y a pas de capsule pour le cours sur Mustache mais des exemples et des transparents. N'hésitez pas à me poser des questions.
Demo REST
Le sujet de la démo sur REST est maintenant disponible. Désolé du retard. Avaancer dans cette démo vous avancera de manière significative dans le devoir.
Devoir #2
Le devoir #2 est disponible. À remettre individuellement.
Planche de démo 6
Une planche de démo est diponible qui vise à vous connecter sur le serveur MySQL du DIRO et d'étudier un tutoriel décrit en cours.
Reprise des cours à distance
Vous avez un reçu un message à cet effet, en gros: reprise des cours à distance, changement de mode d'évaluation (pas de final, le devoir 2 est à remettre individuellement), 4 semaines de cours (incluant cette semaine). Des capsules vidéo sont disponibles sur Studium pour vous aider (ou pas). Je suis bien sûr à l'écoute par mail (entête IFT3225) ou via le forum. Merci de ne pas divulguer les capsules vidéo (mp4).
Cours du 10 mars
En raison d'un jury de thèse, je ne peux me rendre à la première heure du cours qui commencera donc à 12h30.
Notes Intra
Les notes de l'intra sont disponibles sur Studium. Vous avez été 40 à composer l'examen, la moyenne est de 13.75/20, la note maximale est de 19.8. Une permanence sera donnée prochainement afin que vous puissiez venir voir vos copies.
Examen Intra
Je vous rappelle la tenue de l'examen intra en salle N-515 du Pav. Roger Gaudry, le vendredi 21 février de 10h30 à 12h30. L'examen porte sur toute la matière vue à date. Vous avez le droit à 3 pages (us-letter) recto-verso de notes manuelles. Voici à titre indicatif les examens de la dernière session où j'ai enseigné ce cours. Nous n'avons pas encore vu les technologies XML, ni le scriptage côté serveur, ces questions ne sont donc pas pertinentes pour le moment: [Intra-H18-IFT3225.pdf], [Final-H18-IFT3225.pdf].
Les cours reprennent cette semaine
J'utiliserai certainement la séance de TP de vendredi pour avancer
Foire aux stages
Vous cherchez un stage ou souhaitez prendre contact avec les industries locales ? Ne ratez pas la foire aux stages et emplois d'Ivado le 22 janvier (10h-15h).
Cours de vendredi 10 janvier annulé
Pas non plus de laboratoire cette semaine. À mardi !
Premier cours
Bienvenue sur la page du cours IFT3225. Le premier cours a lieu mardi 7 janvier 2020 à 11h30 en salle S-144 (Pav. Roger Gaudry).
Cours après cours
Cette page vous indique ce que je prévois de faire pour chaque cours et vous donne accès aux ressources utilisées en cours (programmes, acétates, etc.). À la fin de chaque cours, cette page sera modifiée de manière à refléter ce que nous avons réellement vu ensemble.
Semaine du 13 avril [xml.pdf]
- Définition d'une application XML
- via DTD
- DTD [cd.dtd] validant cette instance [cd-with-externaldtd.xml]
- DTD xhtml1 (très formateur)
- DTD avec des entités: [book.dtd] validant cette instance [book.xml], elle même composée de [c1.xml], [c2.xml], [toc.xml] et [index.xml]
- via un schéma XML
- deux schémas XML [cd.xsd] (poupées russes) et [cd-withtype.xsd] (avec type) qui valident l'instance [cd-with-schema.xml].
- un schéma XML [code.xsd] pour l'instance [code-with-schema.xml]
- via DTD
- Transformation de XML
- via CSS: [cd.css] [cd-withCSS.xml] [cd-withCSS.xml (exec)]
- par feuille de transformation (XSLT)
-
deux feuilles de
transformation [cd.xsl]
et [cd2.xsl]
pour l'instance
[cd-withXSLT.xml],
[cd-withXSLT.xml (exec)]
- modèle dirigé par les patrons (templates) ([cd.xsl]) versus par les données ([cd1.xsl])
- exemple de programmation fonctionnelle en XSLT: [factoriel.xml] [factoriel.xsd] [factoriel.xsl] [factoriel.xml (exec)]
- exemple plus "sérieux" de feuilles XSLT
[code-with-schema.xml]
[code.xsl]
[code-with-schema.xml (exec)]
Si vous ne voyez rien à l'exécution, c'est que votre navigateur n'est pas compatible avec xPath 2.0
-
deux feuilles de
transformation [cd.xsl]
et [cd2.xsl]
pour l'instance
[cd-withXSLT.xml],
[cd-withXSLT.xml (exec)]
Semaine du 6 avril [mustache.pdf] [securite.pdf]
- Rationalisez vos codes avec Mustache (ou un autre système de template).
- Mustache et javascript:
- un template en ligne: [test-inline.html] (exec) et [test-core.js]
- un template stocké dans le HTML: [test-script.html] (exec) et [test-core.js]
- un template stocké dans un fichier: [test-external.html] (exec) et [test-core.js]
- template et données lue depuis un fichier: [test.html] (exec) et [core.js]
- Mustache et PHP (la base n'a pas été installée au DIRO, faites le !):
- un template en ligne: [index.php?goto=one]
- un template lu: [index.php?goto=two] depuis: [greeting.mustache]
- une application complète fortement inspirée de ce bulletin:
- une base de données SQL: [schema.sql]
- gestion de la base: [db_config.php] et [Inventory.php]
- entête et pied de page: [header.php] et [footer.php]
- fichier de style: [style.css]
- intelligence côté client: [script.js] et côté serveur: [ajax.php]
- templates: [movies.mustache] et [books.mustache]
- Mustache et javascript:
- Éléments de syntaxe
Semaine du 30 mars [rest-part1] [rest-part2] [rest-part3] [rest-part4] [rest-part5]
- Services REST
- principe
- une étude de cas simple mais particulièrement bien écrite provenant de ce tutoriel (+)
- une application REST en une page
avec Sammy.js. Nous allons
consulter le tutoriel qui s'y trouve. L'application
résultante (légèrement modifiée) se trouve ici:
- L'unique page HTML: [index.html]
- La "BD": [item.json]
- L'intelligence de l'appli: [json-store.js]
- Les templates:
Semaine du 23 mars [ajax-part1.mp4] [ajax-part2.mp4] [ajax-part3.mp4] [ajax-part4.mp4]
- AJAX (Asynchronous Javascript XML) Basics: [ajax.pdf]
- une requête
POST
: [ajax-post.html], [ajax-post.html (exec)], [ajax-post.php] - le X de AJAX: [ajax-poll.html], [ajax-poll.html (exec)], [poll.js], [poll.php]
- une requête
- AJAX et JQuery sont dans un bateau
- usage de
load
: [complete_load.html] (src), qui pointe sur: [lastweek.html] (src), [today.html] et [yesterday.html]. - usage de
get
(idem pourpost
): [complete_login.html] (src) qui communique avec : [login.php] - passage de XML: [ajax-poll2.html] (src) qui fait usage de [poll2.js] et le même service qu'avant côté serveur: [poll.php].
- même chose avec la
méthode
ajax
: [ajax-poll-jq.html] (src) qui fait usage de [poll-jq.js] - passage d'objets JSON:
- avec W3C: [ajax-json.html] (src) faisant usage de [ajax-json.js] et [ajax-json.php].
- avec JQuery: [ajax-json-jq.html] (src) faisant usage de [ajax-json-jq.js].
-
stringify
,parse/eval
ettoJSON
: [json.html] (src) liés à [json.js]
- usage de
- Se lier avec le monde (avec éventuellement JQuery et Ajax):
- se lier à Flickr
- Les APIs de Flickr pour lire des fils
- JSONP pour demander une ressource sur un autre domaine: [flickr.html] (src).
- [jquery-flickr.html] (src) et la page js associée: [jquery-flickr.js], faisant usage de jsonp.
- JQuery
Autocomplete widget:
- cas simple: [java-auto.html] (src)
- s'interfacer (via JSONP) avec https://restcountries.eu/: [auto-complete.html] (src) lié à [auto-complete.js]
- un "lecteur" [getrss.php] [getrss.php (exec)] d'un flux radio-canada.
- A fonctionné un jour sans clé API (et donc carte de crédit): afficher une carte avec GoogleMap, en utilisant goMap: [jquery-gomap.html] (src) et le js associé: [jquery-gomap.js].
- se lier à Flickr
vendredi 13 mars 2020 (1h) [ch13-cbs.ppt]
faute de joueurs (bravo au plus courageux d'entre-vous qui a bravé Corona et Ajax pour être présent à l'heure), le cours a été annulé. La séance de démo a lieu a priori.
mardi 9 mars 2020 (1h) [ch13-cbs.ppt]
- AJAX (Asynchronous Javascript XML) Basics: [ajax.pdf]
- ouvrir l'objet XHR de manière portable [ajax.js]
- un exemple simple: [hello.txt] [ajax-get.html] [ajax-get.html (exec)]
- un autre exemple (via PhP) -- prise 1: [ajax-completion.html], [ajax-completion.html (exec)], [completion.js], [completion.php], [completion-init.php]
- un autre exemple (via PhP) -- prise 2: [ajax-completion2.html], [ajax-completion2.html (exec)], [completion.js], [read-unigram.php]
vendredi 28 février 2020 (1h) [ch11-cbs.ppt] [ch13-cbs.ppt]
- PHP et mySQL (suite)
- un exemple "complet" (sur le serveur mySQL du DIRO)
- source: une table de fréquence
- création de la table: [config-unigram-diro2.php] [opendb-unigram-diro2.php] [create-unigram-diro2.php] [create-unigram-diro2.php (exec)]
- un exemple "complet" (sur le serveur mySQL du DIRO)
- une "application" (horrible):
[myclub-tools.php] [myclub-verif.php] [myclub-list.php]
[myclub-frontal.php] [myclub-frontal.php (exec)]
[myclub-admin.php] [myclub-admin.php (exec)] - une version plus inspirée utilisant un mécanisme d'identification (mySQL/PDO):
- les bases : [account.sql], [account-session.sql]
- la logique de gestion de la base: [config-account.php], [db_inc.php], [account_class.php]
- utilisation primaire: [insert-account.php], [login-account.php], [logout-account.php], [sessionlogin-account.php], [delete-account.php]
- frontaux: [myclub-tools.php], [myclub-frontal.php], [myclub-admin.php]
- faisant usage de : [myclub-tools.php], [myclub-whom.php], [myclub-delete.php], [myclub-verif.php]
pas installé au DIRO: faites le !
mardi 25 février 2020 (2h) [ch11-cbs.ppt] [ch13-cbs.ppt]
- PHP et les formulaires
- mode GET: [formulaire-php-get.html] [formulaire-php-get.html (exec)] [treat_form_get.php]
- mode POST: [formulaire-php-post.html] [formulaire-php-post.html (exec)] [treat_form_post.php]
- et pour les radio buttons ? [radio_button.php] [radio_button.php (exec)]
- Big Brother is watching you
- Les [cookies.pdf]:
- générateur de cookies: [cookie-capture.js] [cookies-send.php] [cookies-send.php (exec)]
- consultation des cookies: [cookies-check.php] [cookies-check.php (exec)]
- destruction des cookies: [cookies-cleanup.php] [cookies-cleanup.php (exec)]
- Les sessions:
- Les [cookies.pdf]:
- Quelques trucs avec PhP:
- rediriger une page côté serveur [redirect.php] [redirect.php (exec)]
- factoriser du code HTML. Voir le code de cette page par exemple: [frontal.php]
- PhP et MySQL
- Tour d'horizon de (M/L/W)AMP
- Une base consitutée d'une table: [mysqlsmallfreq.sql].
Changez mon username par le votre et installez cette base au DIRO en suivant les consignes spécifiques au DIRO
(
sed -e 's/felipe_web/toto_web/g mysqlsmallfreq.sql'
) - MySQL au DIRO
- à propos de msqli
- Récupération des entrées d'une base dont on connait les champs:
[config-freq.php]
[opendb-diro2.php]
[closedb-diro2.php]
[mysql-take1.php]
[mysql-take1.php (exec)]
- Récupération des entrées d'une base dont on ne connait
pas les champs:
[mysql-take2.php]
[mysql-take2.php (exec)]
mardi 18 février 2020 (2h) [ch11-cbs.ppt] [ch13-cbs.ppt]
- Introduction à PhP: [php]
- [hello.php] [hello.php (exec)]
- [phpinfo.php] [phpinfo.php (exec)] et son API
- [phpvar.php] [phpvar.php (exec)]
- [base.php] [base.php (exec)]
- les joies de PhP: [divers.php] [divers.php (exec)] et une version qui fonctionne: [divers.php] [divers.php (exec)]
- oop: [piece.php] [piece.php (exec)]
vendredi 14 février 2020 (1h) [ch05-cbs.ppt]
- à propos de l'intra
- quelques pages dynamiques (mais élégantes) en JQuery:
mardi 11 février 2020 (2h) [ch05-cbs.ppt]
- à Propos de la DOM et des événements: [dom.pdf]
- Amélioraton progrerssive en javascript: [progressive.pdf]
- Introduction à JQuery: [jquery.pdf]
vendredi 7 février 2020 (2h) [ch05-cbs.ppt]
- Introduction à la DOM et son scriptage: [dom.pdf] (suite)
- Test MDN Event 1: [mdn-event1.html] [mdn-event1.html (exec)]
- Quelques pages horribles, mais dynamiques (suite)
- j'aurais voulu être un artiste (exemple de très mauvaise page dynamique): [mouse.html] [mouse.js] [mouse.html (exec)]
- un exemple de formulaire HTML avec scriptage javascript non intrusif:
[formulaire.html] [formulaire.css] [formulaire.js] [formulaire.html (exec)] - même formulaire avec validation:
[formulaire-port.html] [formulaire-port.css] [formulaire-port.js] [formulair-port.html (exec)]
mardi 4 février 2020 (2h) [ch05-cbs.ppt]
- Amélioration progressive en CSS: [progressive.pdf]
- Introduction à la DOM et son scriptage: [dom.pdf]
- Exemples de codes
- Création de noeuds dams la DOM: [petit.js] [petit.html] [petit.html (exec)]
- Exemple (accès aux attributs d'un élément): [dom.js] [dom.html] [dom.html (exec)]
- même exemple façon plus moderne ... (javascript est un beau language, profitez-en ...): [dom2.js] [dom2.html] [dom2.html (exec)]
- Pour traiter des documents (X)HTML utilisez plutôt la DOM HTML: [html-dom.js] [html-dom.html] [html-dom.html (exec)]
- Quelques pages horribles, mais dynamiques
- calculatrice (exemple de bonne page dynamique): [Calculette.html] [Calculette.css] [Calculette.js] [Calculette.html (exec)]
- la même calculatrice mais plus dans l'esprit javascript: [calc.html] [calc.css] [calc.js] [calc.html (exec)]
vendredi 31 janvier 2020 (3h) [ch01-cbs.ppt] [ch02-cbs.ppt]
- HTML (suite et fin)
- varia
- Bonjour tel que généré par Word: [bonjour-w.html]
- xhtml versus html5: [plan3-xhtml.html] versus [plan3-html5.html] et voir le plan avec: outliner·
- table: [table1.html].
- formulaire: [form-w3c.html]
- canevas: [canevas.html].
- élément
output
: [form-w3school.html]
- varia
- Quelques mots sur CSS: [css.pdf]
- Quelques mots sur l'accessibilité: [aria.pdf]
-
Introduction Bootstrap: [bootstrap.pdf]
- les joies du copier/coller: [b-grid.html]
- apprendre à compter: [jeu.html]
mardi 28 janvier 2020 (2h) [ch01-cbs.ppt] [ch02-cbs.ppt]
- scriptage (le mot de la fin)
- HTML
[html.pdf]
- quelques alliés: MDN,w3schools.com, html5-tutorial.com
- XHTML 1.0
- la norme
- Bonjour le monde:
- squelette d'une page XHTML1.0: [helloworld.html]
- forme avec lien de validation: [helloworld2.html].
- avec des commandes
meta
en plus pour faciliter l'accessibilité: [bonjourlemonde.html] -
Quiz: Sauriez-vous dire si cette page est XHTML 1.0?
[helloworld3.html]
Réponse ici.
- HTML 5
- la norme
- nouvelle recommandation W3C (HTML 5.2)
- compatibilité avec HTML5
- validateur HTML5 et un exemple de page valide: [bonjour.html]
- même page avec lien sur le validateur: [bonjour2.html]
14 janvier 2020 (2h) [ch01-cbs.ppt] [ch02-cbs.ppt]
- Survol de la suite TCP/IP [tcp-ip.pdf]
- quelques protocoles: (S)FTP,Telnet/SSH, SMTP, POP
- spam (pas très dangereux) via SMTP: [trudeau.smtp]
- HTTP
- principe: [notes de cours de Iulian Ober]
- méthodes GET et POST
- méthode
GET
: [simple-form-get.html] - méthode
POST
: [simple-form-post.html]
- méthode
- à propos de ce votre vie privée: panopticlick
- Introduction à la programmation en ligne de commande
- une introduction (expéditive) aux commandes unix et une ressource extraite de la bibliothèque universelle: [zola1.txt]
- trouver les 100 mots d'au moins 4 caractères les plus fréquents dans les 10000 premiers mots du texte suivant:
head -n 10000 hansard-1.7.txt | tr " " "\012" | awk 'length($0) > 3 {print $0}' | sort | uniq -c | sort -k1,1nr | head -n 100
- fans? Lisez Unix4PoetsTM! Et voici une version du texte utilisé dans cet article: Genesis (merci à Esdras Metayer).
7 janvier 2020 (2h) [ch01-cbs.ppt]
- Présentation de la page de cours:
- Livres, Plan
- Modalités de notation
- Introduction:
- Pourquoi ce cours ?
- évolution des utilisateurs
- quelques statistiques d'intérêt
- Quelques pages cool (i.e. 2.0)
- Un desktop dans votre navigateur
- Aggrégateur de flux de données: netvibes
- L'art de perdre son temps: twitter
- Exploitation de l'homme par l'homme: mechanical turk
- L'industrie du jeu sur le web. Cas de Zynga: (http://www.zynga.com/)
- Web sémantique
- encore un coup de Tim Berners-Lee
- un vieux rêve ...
- LOD, Freebase
- Le web profond
- Quelques points d'histoire (faits saillants: TCP-IP, HTTP)
- Les navigateurs les plus populaires
- Pourquoi ce cours ?