Jeudi - Interface Homme-Machine WebUI
8h30 - Introduction
Publication sur Internet : HTML & CSS
Intervenante : Magali Contensin
- HTML
- présentation rapide de HTML et des éléments principaux,
- arbre du document,
- éléments de création de formulaires,
- différences entre les méthodes HTTP GET et POST
- nouveaux champs de formulaires HTML5.
- CSS
- présentation de CSS 2.1 et de quelques nouveautés CSS 3
- fonctionnalités de CSS qui évitent l'utilisation de scripts JavaScript (création d'un menu déroulant 100% CSS sans JavaScript, roll-over sur une image)
9h30 - JavaScript
Intervenante : Magali Contensin
- Bases du langage ECMAScript (objets prédéfinis, JSON, …)
- Modification dynamique de la structure, du style et du contenu d'un document HTML
- JavaScript discret
10h30 - Pause café
11h00 - Compléments et outils
Intervenante : Magali Contensin
- Communication avec le serveur avec JavaScript AJAX
- Sécurité (XSS, Ajax) Sécurité
- Support par les principaux navigateurs des technologies présentées pendant la matinée (HTML 5, CSS 2 et 3, AJAX, JavaScript, JSON, DOM) Support
- Outils Outils
- inspection du document (outils natifs dans les navigateurs, plugin WebDeveloper, Firebug)
- aide à la création de styles CSS
- firebug
- inspection DOM, débogueur JavaScript, informations sur les en-têtes et corps des requêtes HTTP et Ajax
- Modernizr
- JQuery
- bibliothèques graphiques côté client
13h00 - Repas
14h00 - TP « Firebug, Javascript et DOM »
Finalité
Vous allez voir comment utiliser l'extension Firebug du navigateur Firefox pour interragir avec la structure DOM.
Enoncé
Récupérer sur votre disque dur les trois fichiers suivants : personnel.infos_admin.html, jquery-1.7.min.js, const.js
- Ouvrir le fichier .html avec un editeur de texte
- Fixer le path vers le script const.js
- Ajouter une balise script pointant sur votre copie locale de jquery-1.7.min.js
- Charger la copie local du fichier html sous Firefox
- Dans la console Firebug, à l'aide de jquery, afficher le contenu de l'élément ayant la classe 'mail'
- Changer la couleur de fond de l'élément ayant la classe 'mail'
- Avez vous noté que Firebug vous propose la liste des méthodes disponibles sur un objet?
- Avec jquery, extraire le texte des éléments successifs de la liste contenant les informations utilisateur
Corrigé
/* obtenir le contenu */ $('.mail').html(); /* Changer la couleur de fond */ $('.mail').css("background", "#c8ebcc"); /* Extraire le texte des balises li */ $('li').text(); /* Extraire le texte des balises li */ var val; $('li').each(function(index) { val+=$(this).text(); }); alert(val);
14h10 - Fil rouge « Parcours XPath et Modification du DOM »
CAS : Central Authentication Service
Finalité
De plus en plus de services WEB universitaires sont aujourd'hui authentifiés via des mécanismes de Single-Sign-On tel que CAS (CAS Protocol).
Vous allez voir comment :
- récupérer dans un formulaire HTML l'adresse du serveur CAS auquel un serveur Sympa délègue les authentifications
- vous authentifier sur ce serveur CAS, en remplissant les valeurs du formulaire d'authentifiaction, pour ensuite pouvoir intéragir avec le serveur SOAP de Sympa
Corrigé
14h45 - Fil rouge « Javascript et DOM »
Finalité
Afin de se protéger des robots de collecte d'adresses email, certains service WEB utilisent une obfuscation Javascript.
Cela complique les interactions entre services WEB légitimes, l'adresse email étant souvant utilisée comme clef pour identifier un utilisateur.
Vous allez voir comment :
- embarquer un interpréteur javascript dans votre script Perl | Python | Ruby
- dés-obfusquer un email comme le ferait votre navigateur
Enoncé
Compléter le code fourni dans chaque langage afin de
- modifier l'attribut « src » des éléments « script » du DOM pour avoir un chemin absolu sur le système de fichier
ie “unscript.js” → ”/tmp/unscript.js” - insérer un élément « script » pointant sur le fichier ”/tmp/jquery-1.7.min.js”
- extraire la valeur en clair du mail codé via Javascript en utilisant JQuery
Corrigé
15h30 - Pause café
16h00 - Fil rouge « Client SOAP »
Finalité
Le serveur de mailing-listes Sympa propose une interface SOAP permettant d'interragir avec lui de manière automatisée.
Vous allez voir un exemple de client SOAP vous permettant d'interragir avec une telle interface.
Enoncé
A l'aide du client Sympa SOAP fourni, ajouter le code nécessaire pour
- lister les listes disponibles
- utiliser l'appel SOAP à la fonction Sympa « complex_list »
- lister les abonnés d'une liste
- utiliser l'appel SOAP à la fonction Sympa « review »
Corrigés
20h30 Soirée - Conférence publique
L'histoire de l'informatique en France
- par Pierre Mounier-Kuhn (CNRS & Université Paris-Sorbonne)
- en partenariat avec Terre des Sciences
Une discipline controversée, une industrie bousculée, des politiques contestées
Comment l’ordinateur a-t-il été inventé ? Comment s’est diffusée l’informatique ? Comment une technique donne-t-elle naissance à une science ? Comment stimuler ou freiner l’innovation ? Pourquoi la France, où l’on prétendait en 1947 avoir une « avance théorique » en calcul électronique, a-t-elle dû, vingt ans après, lancer un Plan Calcul pour rattraper son retard ?
Version
$Id: jeudi.txt 680 2012-05-24 15:30:57Z jaclin $
