Command disabled: edit
 

Jeudi - Interface Homme-Machine WebUI

Navigation rapide : Lundi / Mardi / Mercredi / Jeudi / Vendredi Mémos : Perl / Python / Ruby

8h30 - Introduction

Publication sur Internet : HTML & CSS

Intervenante : Magali Contensin

  1. 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.
  2. 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

JavaScript

Intervenante : Magali Contensin

  1. Bases du langage ECMAScript (objets prédéfinis, JSON, …)
  2. Modification dynamique de la structure, du style et du contenu d'un document HTML
  3. JavaScript discret

10h30 - Pause café

11h00 - Compléments et outils

Intervenante : Magali Contensin

  1. Communication avec le serveur avec JavaScript AJAX
  2. Sécurité (XSS, Ajax) Sécurité
  3. 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
  4. 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é

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

CAS

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 :

  1. récupérer dans un formulaire HTML l'adresse du serveur CAS auquel un serveur Sympa délègue les authentifications
  2. 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 :

  1. embarquer un interpréteur javascript dans votre script Perl | Python | Ruby
  2. dés-obfusquer un email comme le ferait votre navigateur

Enoncé

Compléter le code fourni dans chaque langage afin de

  1. 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”
  2. insérer un élément « script » pointant sur le fichier ”/tmp/jquery-1.7.min.js”
  3. extraire la valeur en clair du mail codé via Javascript en utilisant JQuery

personnel.infos_admin.html

jquery-1.7.min.js

const.js

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

  1. lister les listes disponibles
    • utiliser l'appel SOAP à la fonction Sympa « complex_list »
  2. 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 $

jeudi.txt · Last modified: 2012/05/24 17:30 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki