Accueil > Les Journées Systèmes (JoSy) > JoSy "AJAX et Bibliothèques JavaScript pour les ASR" le 3 novembre 2011 à Paris

JoSy "AJAX et Bibliothèques JavaScript pour les ASR" le 3 novembre 2011 à Paris


Objet : La fédération de réseaux RESINFO a organisé une journée JoSy sur le thème :

AJAX et Bibliothèques JavaScript pour les ASR

Les objectifs de cette JoSy étaient les suivants

  • donner aux ASR des bases sur les techniques de développement AJAX et l’utilisation de bibliothèques JavaScript comme jQuery
  • passer en revue les technologies Web coté client (DOM, CSS...) afin d’aider les ASR à programmer de petites applications plus réactives, ergonomiques et pratiques avec AJAX et les bibliothèques JavaScript

Cette journée s’est limitée aux technologies web coté "client" (DOM, CSS, JavaScript, AJAX...).

Date et lieu : le 3 Novembre 2011 dans l’amphithéâtre de la Délégation Paris Michel-Ange du CNRS

Web diffusion : Cette journée a été diffusée sur le WEB grâce à la cellule Webcast du Centre de Calcul de l’IN2P3. Les vidéos sont disponibles en ligne.

Vidéos de la Josy
Diffusion de la Josy


Vidéos à la demande

Organisateurs : Anne Facq, Christian Helft, Magali Contensin, Maurice Libes, Olivier Boebion, Thierry Dostes

Programme

9h15-9h30

Accueil, introduction, objectifs de la journée<span
style="font-style: italic;"> - M. Libes (Centre d’Océanologie de Marseille)


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

9h30-10h15

Introduction et présentation des bases de javascript, rappel des DOM, et CSS<span
style="font-style: italic;"> - Magali Contensin (UMR6216 IBDML)

Résumé : JavaScript est un langage de script exécuté sur le navigateur. Il permet de réagir à des événements de l’utilisateur (clics de souris, modifications de valeurs dans un formulaire, …). Combiné à DOM et CSS, JavaScript permet de modifier la structure et le style de la page web. Cet exposé introduit les notions utilisées lors de la journée JoSy "AJAX et Bibliothèques JavaScript pour les ASR".

Plan :
 Publication sur Internet : HTML & CSS
 Présentation de JavaScript
 ECMAScript : le noyau du langage JavaScript
 Manipulation des objets du document

- Des débuts du dynamisme au DOM
- Modifier une page web avec JS, DOM et CSS
- Formulaires


 Sécurité
 Outils


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

10h15-10h30

Présentation de quelques API javascript simples et légères - M. Libes (Centre d’Océanologie de Marseille)

Résumé : Cette présentation permet de faire connaitre quelques bibliothèques javascripts utiles, plus simples d’utilisation ou plus légères que le modèle émergent "jQuery". Quelques une de ces librairies sont listées sur le site "Javascript.developpez.com"

Nous nous proposons de présenter plus particulièrement les principes de base de 2 librairies dédiées aux contrà´les de champs de formulaires web : LiveValidation et Validanguage. Ces librairies permettent de contrà´ler la saisie dans des champs de divers types numérique, texte, date, adresse mail, téléphones, présence, champs obligatoires, longueurs etc... et d’économiser du temps de développement


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

10h30-10h45 Questions-Réponses
Vidéos de la Josy
Diffusion de la Josy


Vidéo

10h45-11h00 Pause Café
11h00-11h30

Principes de bases de la technologie AJAX- Magali Contensin (UMR6216 IBDML)

Résumé : AJAX permet d’actualiser dynamiquement des parties d’une page web grâce à l’utilisation d’une combinaison de technologies (JavaScript, DOM & CSS, objet XMLHttpRequest). Cette présentation explique comment fonctionne AJAX, comment l’utiliser et quels sont ses avantages et inconvénients.

Plan :
 Comment mettre à jour une partie d’une page web ?
 Principe
 Quelques applications
 Etapes
 Sécurité
 Support par les navigateurs
 Inconvénients
 Avantages
 Outils


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

11h30-12h00

Les apports de HTML5  <span
style="font-style: italic;" class="">- Magali Contensin (UMR6216 IBDML)

Résumé : Le standard HTML5, successeur de HTML 4.01 et de XHTML 1.0, est encore en cours de définition, mais certaines fonctionnalités sont déjà disponibles dans les navigateurs. La présentation donne une vue d’ensemble des apports de HTML5, en mettant l’accent sur l’extension des fonctionnalités des formulaires.

Plan :
 Histoire
 Différences avec HTML4
 API
 Extension des fonctionnalités des formulaires
 Quand passer à HTML5 ?


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

12h00-12h10
Questions-Réponses
12h10-14H00 Repas
14h00-14h30

Le débogueur "Firebug" en action<span
style="font-style: italic;" class=""> - Emmanuel Courcelle (L.I.P.M.)

Résumé : Firebug est une extension installable très facilement sur le navigateur firefox. Il permet de déboguer un site web, en observant et éditant ses trois composantes : html, css, javascript

Nous passerons en revue les principales fonctionnalités de firebug, en partant d’exemples concrets. Nous verrons que cet outil permet de visualiser efficacement les trois composantes d’un site web ainsi que leur interaction, grâce à un découpage de firefox en plusieurs fenêtres qui se répondent mutuellement.

Enfin, nous évoquerons brièvement les outils « firebug-like Â » que l’on peut trouver dans les navigateurs chrome et Internet Explorer.


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

14h30-15h30

Développer avec " jQuery " <span
style="font-style: italic;"> - Vladimir Daric
(Institut de Génétique et Microbiologie - UMR8621)

Résumé : jQuery est une bibliothèque JavaScript compatible avec la grande majorité de navigateurs et est très utilisé (46% des 10,000 sites web les plus visités).

Nous verrons de comment jQuery rends l’écriture du JavaScript un peu moins pénible.

Plan :
 Présentation de concepts de base :

- structure des documents : HTML
- présentation : css
- comportement : JavaScript


 DOM en quelques mots
 Pourquoi c’est une mauvaise idée de faire du JavaScript
 Un moins mauvais JavaScript est possible ...
 A pieds joints dans jQuery : "Hello World"
 Concepts de base :

- événements : On (Document) Load
- sélection
- manipulation


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

15h30-15h40 Questions-Réponses
15h40-15h50
Pause Café
15h50-16h05

Présentation de "REST" <span
style="font-style: italic;"> - Jean-René Rouet
(Centre de Calcul IN2P3<span
style="font-style: italic;">)

Résumé : Introduction du concept d’architecture REST en 15 minutes.


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

16h05-16h20

Introduction aux "framework" Web<span
style="font-style: italic;"> - Jean-René Rouet
(Centre de Calcul IN2P3<span
style="font-style: italic;">)

Résumé : Frameworks web : pourquoi sont-ils là , en quelques mots, et comment ils rendent mon travail plus simple


Pdf

Vidéos de la Josy
Diffusion de la Josy


Vidéo

16h20-17h00

Comment développer une application web en une demi-heure ... Présentation du Framework Django <span
style="font-style: italic;"> - Vladimir Daric
(Institut de Génétique et Microbiologie - UMR8621)

Résumé : En utilisant le framework web Django nous allons mettre en place une application web : schéma de données, interface de gestion de données et des utilisateurs, authentification, vues publiques. Pour finir nous ajouterons de l’interactivité à l’aide de jQuery.

Plan : Django est un framework de développement web en Python open-source qui a pour but de rendre le développement web simple et rapide. Le projet a pour slogan « Le framework web pour les perfectionnistes sous pression  ». [source fr.wikipedia.org/wiki/Django_(framework)]

 Introduction à Django

- Qu’est ce qu’un famework
- Pourquoi utiliser un framework ?


 Concepts de base

- prérequis
- installation
- créer un projet
- le modèle (les données, base de données ...)
- les vues (présentation)
- les URLs
- Django Admin


Pdf

Code source démo Django
Code source démo Django JOSY AJAX et Bibliothèques JavaScript 3 novembre 2011 par Vladimir Daric (Institut de Génétique et Microbiologie - UMR8621)


Code

Vidéos de la Josy
Diffusion de la Josy


Vidéo

16h55-17h10 Questions-Réponses
Vidéos de la Josy
Diffusion de la Josy


Vidéo

17h10 Fin de la journée