jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'École de technologie supérieure, Montréal, Automne 2008
Quelle place pour le framework Rails dans le développement d'application web5pidou
Cette présentation a été réalisée dans le cadre des Rencontres Mondiales décentralisées du Logiciel Libre (RMLLd) qui se sont déroulées du 1er au 3 Juillet 2011 à Saint-Joseph (Ile de la Réunion).
Voici les slides de ma présentation à la Kiwi Party édition 2012 sur jQuery Mobile.
KiwiParty, jQueryMobile,
L'exemple montré est ici : http://kiwiparty.nicolas-hoffmann.net/
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)hibnico
Présentation par Nicolas Lalevée des modèles de gestion de dépendances Maven, Ivy et OSGi au Toulouse Jug du 26 Mai 2011.
Abstract:
La gestion des dépendances, sac de noeuds presque par définition, on va essayer de démêler tout ça.
Après avoir fait un état des lieux avec Maven car il est l'incontournable du moment, nous irons voir comment Ivy peut décrire assez finement et gérer avec souplesse des dépendances. Nous verrons ensuite comment le modèle de dépendances d'OSGi est original et apporte encore de nouveaux concepts. Deux mondes s'affrontent alors, celui de Maven et Ivy face à celui d'OSGi; on tentera enfin d'esquisser un meilleur des deux mondes.
L'ORM Doctrine offre beaucoup plus de flexibilité qu'il n'y paraît. Dans cette présentation, nous allons nous intéresser à son fonctionnement interne et à ses fonctionnalités moins connues, pour découvrir comment mieux l'utiliser. Au programme, évènements et listeners, filtres, tracking policy, mais aussi des astuces sur des architectures possibles pour son code...
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
Atelier WordPress: Création d’extension WordPressIZZA Samir
Initiation aux développement de plugin WordPress, inclus 3 tutoriels:
TP1: Hello World.
TP2: Compteur de visites.
TP3: Création du bouton « j’aime » de Facebook
La conception d'application Web complexe se reposant sur un socle JavaScript devient monnaie courante.
De ce fait, nous nous devons de nous outiller, ainsi que d'utiliser des frameworks adéquats.
Cette présentation a pour but de vous faire découvrir l'un de ces frameworks: RequireJS.
Nous verrons alors que nous pouvons produire des applications modulaires avec gestion de dépendances simplement, permettant ainsi d'avoir des applications qui se chargent rapidement alors que nous avons un découpage complexe, mais aussi des applications maintenables et testables facilement.
Voir: http://humantalks.com/talks/26-apercu-de-requirejs
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Comment organiser un gros projet backboneNicolas Carlo
This talk was built in French (for now), at the occasion of Backbone.js Meetup #2 hold in Paris.
http://www.meetup.com/backbone-paris/events/189771252
Online presentation : http://metidia.com/talk-enlarge-your-backbone-project/
GitHub source : https://github.com/metidia/talk-enlarge-your-backbone-project
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'École de technologie supérieure, Montréal, Automne 2008
Quelle place pour le framework Rails dans le développement d'application web5pidou
Cette présentation a été réalisée dans le cadre des Rencontres Mondiales décentralisées du Logiciel Libre (RMLLd) qui se sont déroulées du 1er au 3 Juillet 2011 à Saint-Joseph (Ile de la Réunion).
Voici les slides de ma présentation à la Kiwi Party édition 2012 sur jQuery Mobile.
KiwiParty, jQueryMobile,
L'exemple montré est ici : http://kiwiparty.nicolas-hoffmann.net/
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)hibnico
Présentation par Nicolas Lalevée des modèles de gestion de dépendances Maven, Ivy et OSGi au Toulouse Jug du 26 Mai 2011.
Abstract:
La gestion des dépendances, sac de noeuds presque par définition, on va essayer de démêler tout ça.
Après avoir fait un état des lieux avec Maven car il est l'incontournable du moment, nous irons voir comment Ivy peut décrire assez finement et gérer avec souplesse des dépendances. Nous verrons ensuite comment le modèle de dépendances d'OSGi est original et apporte encore de nouveaux concepts. Deux mondes s'affrontent alors, celui de Maven et Ivy face à celui d'OSGi; on tentera enfin d'esquisser un meilleur des deux mondes.
L'ORM Doctrine offre beaucoup plus de flexibilité qu'il n'y paraît. Dans cette présentation, nous allons nous intéresser à son fonctionnement interne et à ses fonctionnalités moins connues, pour découvrir comment mieux l'utiliser. Au programme, évènements et listeners, filtres, tracking policy, mais aussi des astuces sur des architectures possibles pour son code...
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
Atelier WordPress: Création d’extension WordPressIZZA Samir
Initiation aux développement de plugin WordPress, inclus 3 tutoriels:
TP1: Hello World.
TP2: Compteur de visites.
TP3: Création du bouton « j’aime » de Facebook
La conception d'application Web complexe se reposant sur un socle JavaScript devient monnaie courante.
De ce fait, nous nous devons de nous outiller, ainsi que d'utiliser des frameworks adéquats.
Cette présentation a pour but de vous faire découvrir l'un de ces frameworks: RequireJS.
Nous verrons alors que nous pouvons produire des applications modulaires avec gestion de dépendances simplement, permettant ainsi d'avoir des applications qui se chargent rapidement alors que nous avons un découpage complexe, mais aussi des applications maintenables et testables facilement.
Voir: http://humantalks.com/talks/26-apercu-de-requirejs
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Comment organiser un gros projet backboneNicolas Carlo
This talk was built in French (for now), at the occasion of Backbone.js Meetup #2 hold in Paris.
http://www.meetup.com/backbone-paris/events/189771252
Online presentation : http://metidia.com/talk-enlarge-your-backbone-project/
GitHub source : https://github.com/metidia/talk-enlarge-your-backbone-project
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.
Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
Au coeur des applications Web riches, de HTML5 ou des applications Web mobiles, JavaScript est désormais incontournable. Sa communauté très dynamique a contribué à créer un écosystème complet pour répondre aux problématiques courantes de test, qualité du code ou intégration continue comme l'a fait avant elle la communauté Java il y a pas loin de dix ans... Parmi les projets les plus observés du moment, c'est curieusement côté serveur que JavaScript fait le plus parler de lui avec Node.js, un environnement de développement Web qui cultive sa différence.
Téléchargement du Coding Kata :
Construire une application sur l'architecture modèle-vue-contrôleur en PHP à partir d'un exemple simple : une liste de choses à faire, avec deux pages types : liste et détails.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Venez découvrir Vue.js, le challenger de React et Angular, au travers d’une présentation endiablée.
Elle sera suivie d’un Hands-on qui vous plongera au cœur de la technique à travers différents exercices. Débutant ou confirmé, ils vous permettront d’acquérir les bonnes pratiques et de peaufiner vos connaissances. Vous serez alors en mesure de créer une application web en quelques minutes.
La connaissance du JavaScript est indispensable.
Alphorm.com Formation React : Les fondamentauxAlphorm
Découvrez, dans cette formation, la bibliothèque React de Facebook.
Vous apprendrez à configurer votre machine de développement.
Vous verrez, grâce au développement d’une application simple les principaux concepts de React
2. OBJECTIFS
1. SAVOIR UTILISER L’OUTIL YEOMAN
1. STRUCTURER UNE APPLICATION AVEC BACKBONE.JS
1. AJOUTER UN MOTEUR PHYSIQUE A TOUT ET
N’IMPORTE QUOI !!!
=> PROGRAMMER DE BELLES WEBAPPS EN JAVASCRIPT
3. YEOMAN ?
C’est quoi?
Un outil qui regroupe plein d’outils…
Ca sert à quoi?
A gagner du temps! En automatisant les tâches répétitives de
la création web.
Ca vient d’où?
Depuis Mai 2012, d’une communauté de développeurs
reconnus dans le monde du web.
5. YEOMAN
PERMET DE
• Démarrer un projet en quelques secondes
• Compiler automatiquement les fichiers coffee, sass…
• Détecter les erreurs Javascript
• Démarrer un serveur de dev
• Recharger la page lorsqu’une modification est détectée
• Optimiser les images
• Minifier tous les fichiers javascript, css, html
• Gérer les dépendances
• Lancer des tests
ETC..
6. YEOMAN
INSTALLATION
Disponible pour: Linux, Mac OS, Windows
Instructions
http://yeoman.io/installation.html
https://github.com/yeoman/yeoman/wiki/Manual-Install
Et notre TP…
7. YEOMAN
DEMARRER
1. Créer un projet
C’est à dire créer un dossier et se positionner dedans
| mkdir MyProject
| cd MyProject
2. Initialiser le projet
| yo webapp
3. Prévisualiser le projet
| grunt server
9. YEOMAN
GENERATEURS
| yo webapp
| yo << generatorName >>
Exemples:
| yo angular
| yo backbone
| yo backbone:view customer
| yo backbone:model customer
11. YEOMAN
POUR ALLER PLUS LOIN
http://yeoman.io/index.html
https://github.com/yeoman/yeoman
http://gruntjs.com/
http://compass-style.org/
http://coffeescript.org/
ETC…
12. BACKBONE ?
C’est quoi?
Une librairie Javascript.
Ca sert à quoi?
A développer des applications web notamment des single-
page webapps.
Ca vient d’où?
Depuis fin 2010, initialement développé par le créateur de
coffeescript et underscore.js
14. BACKBONE
MODEL
Définition d’un modèle:
var MyModel = Backbone.Model.extend({
… définition …
});
Initialisation d’un modèle:
var book = new Book({
title: « One thousand and One Night »,
author: « Scherazade »
});
15. BACKBONE
MODEL (SUITE)
Getters
console.log( book.get(« title ») );
Setters
// Un seul attribut
Book.set(« content », « Lorem ipsum dolor sit amet… »;
// Plusieurs attributs via JSON
book.set({
title: « One Day »,
content: « Lorem ipsum dolor sit amet… »
});
16. BACKBONE
MODEL EVENTS
Les modèles sont sensibles aux événements et déclenchent
des événements.
var BookModel = Backbone.Model.extend({
initialize: function() {
this.on(« change:title », function() {
console.log(« Le titre du livre a changé »);
});
}
});
this.on() -> enregistre un écouteur d’événements
« change:title » -> le modèle a déclenché un événement
17. BACKBONE
COLLECTION
Les collections sont des sets de models
Définition:
var Library = Backbone.Collection.extend({
model: Book,
…
});
Initialisation:
var students = new StudentCollection([
{name: « Jean », id: 1}, {name: « Elisa », id: 2}
]);
18. BACKBONE
COLLECTION METHODS
Quelques méthodes sur les collections
collection.add( model );
collection.remove( model );
collection.reset();
collection.where( attributes );
collection.sort();
…
Plus toutes les méthodes de underscore.js:
forEach, sortBy, map, find, last, filter, ….
19. BACKBONE
VIEW
Les vues correspondent à l’interface utilisateur, elles sont
attachés au DOM et peuvent interagir avec un modèle ou une
collection.
Définition:
var BookView = Backbone.View.extend({
tagName: « li »,
….
});
Initialisation:
var oneDayView = new BookView({
model: oneDayBook
});
20. BACKBONE
VIEW DOM ELEMENT
Une vue correspond à un élément du DOM.
Elle peut être attachée à un élément existant:
var Cart = Backbone.View.extend({
el: « #cart-id »
});
Elle peut créer un élément:
var CartProduct = Backbone.View.extend({
tagName: « li »,
className: « cart-item »
});
21. BACKBONE
VIEW MODEL EVENTS
Une vue observe son modèle attaché.
Mettre en place l’écouteur d’événements:
var CartProduct = Backbone.View.extend({
initialize: function() {
this.model.on(« change:quantity », this.render, this);
}
});
22. BACKBONE
VIEW USER EVENTS
Une vue écoute les événements déclenchés par l’utilisateur.
Mettre en place l’écouteur d’événements:
var CartProduct = Backbone.View.extend({
events: {
« click .addOne »: « addOne »
},
addOne: function() {
var newQuantity = this.model.get(« quantity »)++;
this.model.set(« quantity », newQuantity);
}
});
23. BACKBONE
VIEW TEMPLATES
Les vues peuvent utiliser le système de template fourni par la
libraire underscore.js
Exemple de définition d’un template:
<script type=« text/template » id=« cart-item-template »>
<li class=« cart-item »> <%= label %> </li>
</script>
Utilisation d’un template dans une vue:
var CartProduct = Backbone.View.extend({
template: _.template( $(« #cart-item-template »).html() )
});
24. BACKBONE
VIEW TEMPLATES (SUITE)
Que signifie « <%= label %> » dans le slide précédent?
Cette expression sera remplacée via le moteur de template de
underscore.js par la valeur de label.
Exécution du template:
var CartProduct = Backbone.View.extend({
template: _.template( $(« #cart-item-template »).html() ),
render: function() {
this.$el.html( this.template( this.model.attributes) );
}
});
25. BACKBONE
MODEL SYNC
Récupèrer les attributs du modèle sur le serveur:
model.fetch();
Sauvegarder le modèle sur le serveur:
model.save();
Supprimer le modèle côté serveur (et côté client) :
model.destroy();
26. BACKBONE
COLLECTION SYNC
Comme pour les modèles, les collections peuvent être
synchronisés avec le serveur:
collection.fetch();
collection.create( {
name: « Tim »
} );
27. BACKBONE
MODEL SYNC (SUITE)
Comment Backbone connaît la requête à effectuer pour
synchroniser le modèle client et le modèle sur le serveur?
RESTful JSON Interface
Autrement dit, si votre serveur suit la norme REST et est
capable de recevoir et produire des données au format
JSON, Il n’y a RIEN D’AUTRE A ECRIRE !!!
Exemple d’URL appelée après un comment.fetch():
http://monserveur.com/articles/14/comments/36
Où 36 == model.id
28. BACKBONE
ROUTER
SINGLE PAGE APPLICATION
Les actions de l’utilisateur n’entrainent pas un
changement de l’URL
Problème: Comment conserver un état de mon application et
le reproduire après, par exemple, un refresh de la page?
Le router va nous permettre de gérer les états de notre
application et de lier certains événements à une URL.
31. BACKBONE
ROUTER METHODS
Ajout manuel d’une route:
myRouter.route( /^(.*?)/special$/ , « special », function() {});
[Utilisation d’une expression régulière]
Mise à jour de l’URL:
this.navigate(« comment/ » + id);
Mise à jour de l’URL en déclenchant l’événement correspondant:
myRouter.navigate(« cart », {trigger: true});
32. BACKBONE
POUR ALLER PLUS LOIN
Documentation officielle:
http://backbonejs.org/
http://underscorejs.org/
Tutos:
http://weblog.bocoup.com/
Exemple:
http://backbonejs.org/docs/todos.html
33. BOX2D ?
C’est quoi?
Une librairie de moteur physique 2D.
Ca sert à quoi?
A simuler une gravité, une collision …
Ca vient d’où?
Initialement créée en C++, la librairie a été portée dans
plusieurs langages dont récemment en Javascript.
34. BOX2D
OBJETS FONDAMENTAUX
• World: le monde box2d, c’est à dire tous les objets,
contraintes, joints créés
• Shape: les formes (cercles, rectangles, …)
• RigidBody: « les corps de matières »
• Fixture: lien entre shape et body avec des propriétés
comme la densité, la friction
• Constraint: contraintes appliquées aux corps
• Joint: containtes liant les corps entre eux
• Solver: le moteur qui met à jour les propriétés des objets
toutes les x secondes en fonction des contacts,
contraintes …
35. BOX2D
THE WORLD
Initialisation:
// Définition du vecteur de gravité (dans le plan 2D)
var gravity = new Box2D.Common.Math.b2Vec2( 0, 10 );
// Augmente les performances
var doSleep = true;
// Initialisation du monde Box2D
var world = new Box2D.Dynamics.b2World( gravity, doSleep );
36. BOX2D
FIXTURES
Définition d’une fixture avec une shape rectangulaire:
// Ne pas utiliser directement des pixels, prendre une échelle plus petite
var SCALE = 30, width = 400, height = 100;
// Propriétés de la fixture
var fixtureDef = new Box2D.Dynamics.b2FixtureDef;
fixtureDef.density = 1.0;
fixtureDef.friction = 0.5;
fixtureDef.restitution = 0.2;
// Forme de la fixture
fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
fixtureDef.shape.SetAsBox( width / SCALE, height / SCALE);
37. BOX2D
BODY
Création d’un corps avec la fixture précédente
var x = 200, y = 1000, angle = 0; // angle en radians
// Définition du body
var bodyDef = new Box2D.Dynamics.b2BodyDef;
bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody; // b2_dynamicBody
bodyDef.position.x = x / SCALE; // Position du centre de l’objet!
bodyDef.position.y = y / SCALE;
bodyDef.angle = angle;
// Création du body dans le monde
var body = world.CreateBody( bodyDef );
// Ajout de la fixture au body (donc de sa forme et ses caractéristiques)
body.CreateFixture( fixtureDef );
38. BOX2D
BODY METHODS
body.GetPosition(); // Retourne le centre de la forme dans le monde
body.GetAngle();
body.SetType
body.SetPositionAndAngle
Agir sur le corps:
body.ApplyForce( vecteur, centre ) // Pousser un objet
body.ApplyImpulse ( vecteur, centre ) // Frapper un objet
39. BOX2D
RAFRAICHIR LE MONDE
Les éléments du monde sont recalculés toutes les x périodes.
Définition d’une période en Javascript:
var periode = 1000 / 60; // 60 fps
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, periode);
};
})();
40. BOX2D
RAFRAICHIR LE MONDE (SUITE)
Rafraichir le monde en utilisant la période précédente:
(function update() {
world.Step(
1 / 60, // frame-rate
10, // velocity iterations
10 // position iterations
);
// world.ClearForces();
requestAnimFrame(update);
})();
41. BOX2D
DEBUG DRAW
ATTENTION: BOX2D N’EST PAS FAIT POUR DESSINER MAIS
SEULEMENT POUR CALCULER DES INTERACTIONS !!!!
Cela-dit, le mode debug permet de dessiner le monde dans
un canvas (utile pour démarrer sans avoir à coder les
fonctions de dessins html5).
Initialisation:
var debugDraw = new Box2D.Dynamics.b2DebugDraw();
debugDraw.SetSprite( $(« #canvas »)[0].getContext("2d") );
debugDraw.SetDrawScale(SCALE);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
world.SetDebugDraw(debugDraw);
43. BOX2D
POUR ALLER PLUS LOIN
http://code.google.com/p/box2dweb/
http://www.box2dflash.org/docs/2.1a/reference/
http://box2d.org/documentation/
44. CONCLUSION
Nous avons vu:
• Comment utiliser Yeoman pour s’éviter les tâches
répétitives et ainsi gagner du temps pour notre
développement
• La libraire Javascript Backbone pour structurer et
organiser notre code Javascript
• La librairie Box2D pour animer notre interface utilisateur
avec un moteur physique en Javascript
Y’a plus qu’à…