Introduction. AngularJS.

Dimension: px
Commencer à balayer dès la page:

Download "Introduction. AngularJS. "

Transcription

1 Introduction Introduction Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Introduction Introduction : simplifie l écriture des vues dynamiques d une application Web; est un outil écrit en JavaScript par Google; étend l expressivité de HTML; Exemple de page dynamique utilisant : <!doctype html> <html ng-app> <head><script src="angularminjs"></script></head> <input type="text" ng-model="name"> <h1>bonjour {{name!</h1> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Contrôleurs et Data Binding Contrôleurs Un deuxième exemple de page dynamique : <!doctype html> <html ng-app> <head><script src="angularminjs"></script></head> <p ng-init=" nom='bob' ">Bonjour {{nom!</p> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Data Binding : les vues sont automatiquement modifiées lors d un changement du modèle par un contrôleur Les contrôleurs sont attachés aux éléments du DOM et font évoluer le modèle en fonction des actions de l utilisateurs ou d événements <!doctype html> <html ng-app> <!-- --> <div ng-controller="myctrl"> <input type="text" ng-model="src"> <button ng-click="copy()">copier</button> <h1>{{dst</h1> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

2 Contrôleurs et Data Binding Contrôleurs Scopes et RootScope Contrôleurs Data Binding : les vues sont automatiquement modifiées lors d un changement du modèle par un contrôleur Les contrôleurs sont attachés aux éléments du DOM et font évoluer le modèle en fonction des actions de l utilisateurs ou d événements La fonction qui permet de construire une instance du contrôleur : function MyCtrl($scope) { $scopecopy = function() { $scopedst = $scopesrc; La variable $scope référence un objet qui correspond à la partie du modèle attachée à l élément du DOM contrôle Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Scopes et RootScope Contrôleurs La variable $scopescope contient l intégralité du modèle alors que la variable $scope contient uniquement la partie du modèle attachée à l élément du DOM : <div ng-controller="myctrl"> <input type="text" ng-model="src"> <button ng-click="copy()">copier</button> <h1>{{dst</h1> function MyCtrl($scope, $rootscope) { $scopecopy = function() { $rootscopedst = $scopesrc; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 ng-repeat Portée des scopes : <div ng-controller="myctrl"> {{ dst {{ dst <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <ul><li ng-repeat="e in items"> {{ e </li></ul> function MyCtrl($scope, $rootscope) { $rootscopedst = "rootscope"; $scopedst = "scope"; Chaque contrôleur peut donc avoir une partie du modèle comme contexte Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

3 ng-repeat visibilité <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <ul><li ng-repeat="e in items"> {{ e </li></ul> function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Il est possible de masquer ou d afficher certains éléments : <input type="checkbox" ng-model="checked"> <span ng-show="checked">coché</span> <span ng-hide="checked">non coché</span> <input type="text" ng-model="data"> <ul ng-switch on="data"> <li ng-switch-when="toto">data==toto</li> <li ng-switch-when="truc">data==truc</li> <li ng-switch-default>data!=toto and data!=truc</li> </ul> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 style Il est possible de modifier la classe et le style des éléments : <body ng-init="style={color:'green'"> <button ng-click="style={color:'red'">rouge</button> <button ng-click="style={color:'black'">noir</button> <span ng-style="style">zadza</span> <pre>style={{style</pre> <body ng-init="cls='green'"> <button ng-click="cls='red'">rouge</button> <button ng-click="cls='black'">noir</button> <span ng-class="cls">zadza</span> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 formulaire <form name="myform"> <input name="input" type="text" name="input" ng-model="text" ng-pattern="/^[a-z]{3,6$/" required> <button ng-disabled="!myform$valid" type="submit"> Envoyer </button> <span class="error" ng-show="myforminput$errorrequired"> Nécessaire </span> <span class="error" ng-show="myforminput$errorpattern"> 3 à 6 lettres miniscules </span> </form> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

4 événements les liens et les images <body ng-controller="myctrl"> <div ng-click="onevent('click')">click <div ng-mousedown="onevent('down')">down <div ng-mouseup="onevent('up')">up <div ng-mouseenter="onevent('enter')">enter <div ng-mouseleave="onevent('leave')">leave <div ng-mouseover="onevent('over')">over <input ng-model="data" ng-change="onevent('change')"> function MyCtrl($scope) { $scopeonevent = function(s) { consolelog(s); <body ng-controller="myctrl"> <div ng-repeat="item in items"> <a ng-href="{{itemimg"> <img ng-src="{{itemrimg"> </a> function MyCtrl($scope) { $scopeitems = [ {img : "ajpg", rimg : "rajpg", {img : "bjpg", rimg : "rbjpg" ]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 utilisation des filtres <body ng-controller="listctrl"> <input ng-model="item"> <button ng-click="add()">add</button> <input ng-model="query"> <ul><li ng-repeat="e in items filter:query"> {{ e </li></ul> function ListCtrl($scope) { $scopeitems = []; $scopeadd = function() { $scopeitemspush($scopeitem); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les modules Modules La façon de construire l application est spécifiée par des modules Dans les modules, on spécifie ce qui est partagé dans l application Un module peut dépendre d autres modules L application a un module principal Dans le code HTML : <!doctype html> <html ng-app="myapp"> <!-- --> </html> Côté JavaScript : var myapp = angularmodule('myapp', []); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

5 Modules Modules Les modules Les modules Un exemple avec la définition d un nouveau filtre : var myapp = angularmodule('myapp', []); myappfilter('bracket', function() { return function(text) { return '['+text+']'; ); Utilisation du filtre côté HTML : <!doctype html> <html ng-app="myapp"> <head><!-- --></head> {{ 'exemple' bracket <!-- [exemple] --> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les modules Modules Trois sortes d éléments peuvent être définis dans un module : Un service (un objet partageable); Une directive (nouvel élément côté HTML); Un filtre (voir le transparent précédent) Il est recommandé de séparer les différents éléments : var myappservice = angularmodule('myappservice', []); var myappdirective = angularmodule('myappdirective', []); var myappfilter = angularmodule('myappfilter', []); var myapp = angularmodule('myapp', ['myappservice', 'myappdirective', 'myappfilter']); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d exécuter du code au lancement de l application : var myapp = angularmodule('myapp', []); myapprun(function($rootscope) { $rootscopemessage = "Mon message"; ); <!doctype html> <html ng-app="myapp"> <head><!-- --></head> {{ message <!-- devient "Mon message" --> </html> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Un service est un objet utilisable par d autres objets de l application : var myappservice = angularmodule('myappservice', []); var myapp = angularmodule('myapp', ['myappservice']); myappservicefactory('messages', function() { callbacks : [], addmessage : function(msg) { for (var i = 0; i < thiscallbackslength; i++) thiscallbacks[i](msg);, addcallback : function(callback) { thiscallbackspush(callback); ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

6 Code du contrôleur pour poster de nouveau message : function AddMsgCtrl($scope, messages /* injection */) { $scopeaddmessage = function() { messagesaddmessage($scopemsg); Code HTML associé à ce contrôleur : <div ng-controller="addmsgctrl"> <input type="text" ng-model="msg"> <button ng-click="addmessage()">add</button> Code d un contrôleur qui affiche le dernier message : function MsgViewer($scope, messages) { messagesaddcallback(function(msg) { $scopemsg = msg; ); Code HTML associé à ce contrôleur : <div ng-controller="msgviewer"> {{ msg Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Définition de Counter (un service qui compte des messages) : function Counter() { thiscount = 0; thiscallbacks = []; Counterprototypenotify = function(msg) { thiscount++; for (var i = 0; i < thiscallbackslength; i++) thiscallbacks[i](thiscount); CounterprototypeaddCallback = function(callback) { thiscallbackspush(callback); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Ajout d une fabrique pour créer le service avec l aide d un autre service : myappservicefactory('counter', function(messages) { var counter = new Counter(); messagesaddcallback(function(msg) { counternotify(msg); ); return counter; ); Le service messages est injecté dans la fabrique du service counter Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

7 Utilisation du service counter par un contrôleur : function CountViewer($scope, counter) { counteraddcallback(function(count) { $scopecount = count; ); Code HTML qui utilise ce contrôleur : <div ng-controller="countviewer"> {{ count Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 et événements extérieurs à : Les modifications du modèle engendrent une modification du DOM uniquement à la fin d un évenements Donc, il n y aura pas de modification du DOM à la fin d un traitement associé à un événement extérieur à La méthode $apply(func) permet d exécuter une fonction depuis l extérieur de Pseudo-code de la méthode $apply() : function $apply(expr) { try { return $eval(expr); catch (e) { $exceptionhandler(e); finally { $root$digest(); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); on: function (eventname, callback) { socketon(eventname, function () { var args = arguments; $rootscope$apply(function () { callbackapply(socket, args); ); );, /* méthode emit du transparent suivant */ ; ); appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); /* méthode on du transparent précédent */ emit: function (eventname, data, callback) { socketemit(eventname, data, function () { var args = arguments; $rootscope$apply(function () { if (callback) { callbackapply(socket, args); ); ) ; ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

8 Injection Injection appfactory('socket', function ($rootscope) { var socket = ioconnect('ws://localhost:8080'); /* méthode on du transparent précédent */ emit: function (eventname, data, callback) { socketemit(eventname, data, function () { var args = arguments; $rootscope$apply(function () { if (callback) { callbackapply(socket, args); ); ) ; ); Par inférence sur le nom des paramètres : function MyController($scope, counter /* injection */) { /* */ Cette méthode d injection ne résiste pas à la minification/obfuscation du code JavaScript Par conséquent, il est préférable de faire : function MyController(scope, counter) { /* */ MyController$inject = ['$scope', 'counter']; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Injection Injection Pour les fabriques, il est possible de faire : function counterfactory(messages) { /* */ counterfactory$inject = ['messages']; myappservicefactory('counter', counterfactory); ou plus simplement avec la notation en ligne : myappservicefactory('counter', ['messages', function(messages) { /* */ ]); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Objectif : afficher des vues en fonction de l URL présente dans la barre d adresse du navigateur de façon à avoir un déplacement agréable dans le site Web (avec gestion de l historique et des paramètres) Solution : Avec HTML5, il est possible d interagir avec la barre d adresse du navigateur (URL, historique, etc) Le service $location de permet d avoir accès à ces fonctionnalités Le service $route de observe l URL (grâce au service $location) et modifie le contenu de la page en fonction de l URL Les routes sont définies via l API $routeprovider Les vues sont insérées côté HTML à l aide de ng-view Les paramètres sont accessibles via le service $routeparams Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

9 Soit le tableau suivant : var users = [ { id : 0, name : "Lucie", age : 21, { id : 1, name : "Bob", age : 22, { id : 2, name : "Christine", age : 30, { id : 3, name : "Arthur", age : 24, ]; #/users : Lucie Bob Christine Arthur #/user/1 : Bob age : 22 #/user/2 : Christine age : 30 Pour configurer les routes, on configure le service $routeprovider : angularmodule('myapp', []) config(function($routeprovider) { $routeproviderwhen('/users', { templateurl: 'usershtml', controller: UserListCtrl ) when('/user/:id', { templateurl: 'userhtml', controller: UserCtrl ) otherwise({redirectto: '/users'); ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Le fichier usershtml : <ul> <li ng-repeat="user in users"> <a href="#/user/{{userid">{{username</a> </li> </ul> Le contrôleur UserListCtrl : function UserListCtrl($scope) { $scopeusers = users; Le fichier userlisthtml : <b>{{username</b> <ul> <li>age : {{userage</li> </ul> <a href="#/users">liste des utilisateurs</a> Le contrôleur UserCtrl : function UserCtrl($scope, $routeparams) { /* TODO : tester la valeur du paramètre */ $scopeuser = users[$routeparamsid]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

10 Les directives permettent de créer de nouveaux éléments HTML : angularmodule('myapp', []) directive('user', function(){ restrict: 'E', replace: true, scope: { src : '=src', /* ou src : '=' */ template: '<span>{{srcname : {{srcage</span>' ); Ensuite, il est possible d utiliser le nouveau composant dans le HTML : <body ng-init="bob = {name:'bob', age:22"> <user src="bob" /> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d isoler le template dans un autre fichier : var myapp = angularmodule('myapp', []) myappdirective('user', function(){ restrict: 'E', replace: true, scope: { src : '=src', template: 'userhtml', ); Contenu du fichier userhtml : <span>{{srcname : {{srcage</span> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Il est possible d associer un contrôleur à l élément : myappdirective('userform', function(){ restrict: 'E', replace: true, scope: { userlist : '=', /* attr user-list */ templateurl: 'userformhtml', controller : 'UserFormCtrl' ); Le code du contrôleur UserFormCtrl : function UserFormCtrl($scope) { $scopeadd = function(user) { $scopeuserlistpush(user); Le contenu du fichier userformhtml : <div> <input type="text" ng-model="username" /> <input type="text" ng-model="userage" /> <button ng-click="add(user);">ajouter</button> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

11 Utilisation des balises précédentes : <body ng-controller="mainctrl"> <ul> <li ng-repeat="user in users"> <user src="user" /> </li> </ul> <userform user-list="users" /> Code du contrôleur GlobalCtrl : function MainCtrl($scope) { $scopeusers = [{ name : "Lucie", age : 21, /*$*/]; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Supposons que la directive suivante soit définie : myappdirective('message', function(){ restrict: 'E', replace: true, scope: { nickname : '=', templateurl: 'messagehtml', ); Nous souhaitons utiliser la directive de la façon suivante : <message nickname="bob">bonjour</message> De façon à obtenir : <b>bob</b> : Bonjour Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Réalisation d une grille de morpion : Pour ce faire, il suffit de définir le template de la façon suivante : <span> <b>{{nickname</b> : <span ng-transclude></span> </span> Le mot-clé ng-transclude permet de copier le contenu présent dans la balise dans la balise désignée à l aide du mot-clé Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 <body ng-controller="mainctrl"> <grid grid="grid" on-click="play"></grid> Avec le style suivant : cell { display :inline-block; height:30px; width:30px; border: 1px solid gray; red { background-color:red; blue { background-color:blue; while { background-color:white; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

12 Définition de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'E', replace: true, scope: { grid : '=', onclick : '=', templateurl: 'gridhtml', ); Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Le template gridhtml : <div> <div ng-repeat="l in [0,1,2]"> <div class="cell" ng-repeat="c in [0,1,2]" ng-class="grid[l][c]" ng-click="onclick(l,c)"> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Définition du contrôleur : function MainCtrl($scope) { $scopegrid = []; for (var i = 0; i < 3; i++) { $scopegrid[i] = []; for (var j = 0; j < 3; j++) $scopegrid[i][j] = 'while'; $scopeplay = function(x,y) { $scopegrid[x][y]='red'; Rappel de l utilisation du contrôleur : <body ng-controller="mainctrl"> <grid grid="grid" on-click="play"></grid> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Si nous avons le code HTML suivant : <body ng-controller="mainctrl"> <grid grid="grid" on-click="playred"></grid><br><br> <grid grid="grid" on-click="playblue"></grid> Que se passe-t-il avec le contrôleur suivant? function MainCtrl($scope) { /* TODO : initilisation de la grille */ $scopeplayred = function(x,y) { $scopegrid[x][y]='red'; $scopeplayblue = function(x,y) { $scopegrid[x][y]='blue'; Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

13 Nous souhaitons utiliser le code HTML suivant : <body ng-controller="mainctrl"> <grid grid="grid" on-click="grid[x][y]='red'"></grid> <grid grid="grid" on-click="grid[x][y]='blue'"></grid> Avec le contrôleur suivant : function MainCtrl($scope) { $scopegrid = []; for (var i = 0; i < 3; i++) { $scopegrid[i] = []; for (var j=0;j<3;j++) $scopegrid[i][j] = 'while'; Modification de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'E', replace: true, scope: { grid : '=', onclick : '&', templateurl: 'gridhtml', ); Pourquoi la directive donnée précédemment ne fonctionne plus? Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Modification du template gridhtml : <div> <div ng-repeat="l in [0,1,2]"> <div class="cell" ng-repeat="c in [0,1,2]" ng-class="grid[l][c]" ng-click="onclick({x:l, y:c)"> Rappel de l utilisation de la directive : <body ng-controller="mainctrl"> <grid grid="grid" on-click="grid[x][y]='red'"></grid> <grid grid="grid" on-click="grid[x][y]='blue'"></grid> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Bertrand Estellon (AMU) Développement Web 2 April 1, / 436 Les différentes façons d insérer une directive : E Element name: <my-directive></my-directive> A Attribute: <div my-directive="exp"> C Class: <div class="my-directive: exp;"> M Comment: <!-- directive: my-directive exp --> Modification de la directive : var myapp = angularmodule('myapp', []); myappdirective('grid', function(){ restrict: 'CA', /* */ ); Utilisation : <div class="grid: grid" on-click="grid[x][y]='red'"> <div grid="grid" on-click="grid[x][y]='blue'"> Bertrand Estellon (AMU) Développement Web 2 April 1, / 436

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale

Modèle-Vue-Contrôleur. Développement Web 2. Projet 1 Sondages. Organisation générale PHP Modèle-Vue-Contrôleur Introduction Modèle-Vue-Contrôleur Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Le Modèle-Vue-Contrôleur (MVC) est un méthode de conception utilisée

Plus en détail

Problématique. Développement Web 2. Problématique. Jetty Création d un serveur Web

Problématique. Développement Web 2. Problématique. Jetty Création d un serveur Web Communication client/serveur Comet Problématique Problématique Développement Web 2 Problématique : Nous souhaitons réaliser un tchat Les clients se connectent au serveur; Les clients peuvent discuter;

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Référence du document :

Référence du document : Référence du document : Version du 11/03/2011 18/10/2012 Modifiée par JTG JTG Commentaires Création du document Ajout du paramètre idcategory Table des matières Présentation... 2 Méthodes d intégration...

Plus en détail

AngularJS Développez aujourd'hui les applications web de demain

AngularJS Développez aujourd'hui les applications web de demain Avant-propos 1. Pourquoi ce livre? 11 2. À qui s'adresse cet ouvrage? 12 3. Structure de l'ouvrage 12 4. Remerciements 13 Introduction à AngularJS 1. Introduction 15 2. Single Page Application 16 3. AngularJS

Plus en détail

Internet. jquery jquery Mobile Partie 2

Internet. jquery jquery Mobile Partie 2 Internet jquery jquery Mobile Partie 2 Olivier Pons / 2013 Objectif Jquery / jquery Mobile Sommaire 1. Fondamentaux DOM 2. jquery 3. jquery Mobile 2 / 32 1. Fondamentaux DOM - Définition Le Document Object

Plus en détail

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Après avoir installé SharePoint Foundation 2013, puis configuré le moteur de recherche, voyons comment personnaliser

Plus en détail

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Licence STIC IUT de Marne-la-Vallée 12/03/2015 Cours de jquery Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Philippe Gambette Organisation pratique Contact - Courriel : philippe.gambette@gmail.com

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

Web Components. Laurent Jouanneau Novembre 2013 - FranceJS. Innophi

Web Components. Laurent Jouanneau Novembre 2013 - FranceJS. Innophi Web Components Laurent Jouanneau Novembre 2013 - FranceJS Innophi CasperJS http://ljouanneau.com @ljouanneau http://innophi.com openweb.eu.org jelix.org slimerjs.org casperjs.org Qu'est ce qu'un composant

Plus en détail

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012 Introduction Web 1ère année, cours - 5/5 Marcel Bosc 2011-2012 Département informatique IUT de Villetaneuse Université Paris-13 table des matières Types en PHP Classes et objets Organisation code PHP CMS

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

Plus en détail

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax 1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015 Programmation Web IMAC 2015-2016 TD 8 : Formulaires 2 décembre 2015 Objectif: Dans ce TD, nous allons introduire les formulaires en HTML. Pour pouvoir les utiliser on abordera aussi les plug-ins jquery

Plus en détail

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/

Plus en détail

Initiation à la réalisation de site Web pour mobiles

Initiation à la réalisation de site Web pour mobiles TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

REWEARN la nouvelle façon de monétiser un site web

REWEARN la nouvelle façon de monétiser un site web Réalisé par Guillaume Villechange Avec Matthieu Moly DOSSIER PROJET INFORMATIQUE ET SCIENCE DU NUMERIQUE REWEARN la nouvelle façon de monétiser un site web 0 SOMMAIRE Introduction Etude du projet Le besoin

Plus en détail

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout! JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/5 2014-2015 Présentation Exemple 1 Marcel Bosc Exemple 2 Département informatique 1ère partie

Plus en détail

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons :

Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : Préambule Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : La géolocalisation, qui permet de localiser l utilisateur par

Plus en détail

1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 3. ANGULAR AVEC TYPESCRIPT... 5. «Main»... 5 «Sous modules»... 5

1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 3. ANGULAR AVEC TYPESCRIPT... 5. «Main»... 5 «Sous modules»... 5 1 TypeScript 1. INSTALLATION... 2 2. CREATION D UN PROJET TYPESCRIPT... 3 A. AVEC VISUAL STUDIO... 3 B. AVEC VISUAL STUDIO CODE... 3 C. CREATION D UN SERVEUR AVEC «HTTP-SERVER»... 4 3. ANGULAR AVEC TYPESCRIPT...

Plus en détail

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter INTRODUCTION À l origine, projet interne lancé au sein de l entreprise Twitter Août 2011 Bootstrap V1, Janvier 2012 Bootstrap V2, Août 2013 Bootstrap V3 Bootstrap est un frameworks HTML/CSS Bibliothèque

Plus en détail

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes Visualisation interactive de données sur le web Présentation Généralités Repérage dans le support de cours Sur les slides projetés, le numéro de page entre parenthèse correspond à celui de votre support

Plus en détail

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

420-PK9-SL Programmation WEB JavaScript DOM

420-PK9-SL Programmation WEB JavaScript DOM 420-PK9-SL Programmation WEB JavaScript DOM Introduction Le lien entre JavaScript et le HTML/CSS est une hiérarchie d instances d objets appelé DOM (Document Object Model). À chaque balise HTML correspond

Plus en détail

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Mac OS X Dashboard Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Dashboard un ensemble d outils toujours disponibles [F12] trois types d outils : accessoires (très autonomes)

Plus en détail

AngularJS. AngularJS 13/05/2015

AngularJS. AngularJS 13/05/2015 AngularJS AngularJSest né en 2009 dans les locaux de Google. Angular est construit autour des concepts clés suivants: Architecture MVC (Modèle-Vue-Contrôleur) ou MVW (Model-View-Whatever) 2 WayData Binding

Plus en détail

Introduction. Rappel : conception, interrogation et mise à jour d une base de données

Introduction. Rappel : conception, interrogation et mise à jour d une base de données Introduction Rappel : conception, interrogation et mise à jour d une base de données De nombreux sites Web ont une (ou plusieurs) BD pour gérer leur données 2/51 Pages Web statiques L utilisateurice demande

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En pratique Pour réaliser ce TD vous avez besoin de :. Un navigateur web. Un client FTP ou une invite de commande Unix. Un éditeur de texte Pour le TD nous

Plus en détail

Création du contenu RichMédia

Création du contenu RichMédia HTML5 : les formulaires 2.0 Avec Html4, les typesde champs n'étaientpasnombreux. HTML5 apporteplus d'unedouzaine de nouveauxtypes. HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer

Plus en détail

Document Object Model (DOM)

Document Object Model (DOM) Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés

Plus en détail

Sommaire Accès via un formulaire d'identification... 4 Accès en mode SSO... 5 Quels Identifiant / mot de passe utiliser?... 6

Sommaire Accès via un formulaire d'identification... 4 Accès en mode SSO... 5 Quels Identifiant / mot de passe utiliser?... 6 Sommaire Accès via un formulaire d'identification... 4 Accès en mode SSO... 5 Quels Identifiant / mot de passe utiliser?... 6 2 І O2S Intégration O2S dans un site Internet Ce document présente une description

Plus en détail

Introduction aux applets

Introduction aux applets Introduction aux applets M. Belguidoum Université Mentouri de Constantine Département Informatique M. Belguidoum (UMC) Programmation réseau 1 / 30 Plan 1 Quelques rappels 2 Principe de fonctionnement des

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

SYSTÈMES D INFORMATIONS

SYSTÈMES D INFORMATIONS SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.

Plus en détail

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Introduction Tableaux La balise (DIV) Polices en HTML Body (corps) et Head (en-tête) attributs Forms(formulaires):

Plus en détail

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année Bases de Données et Ingénierie des Systèmes d Information 1 PHP/MySQL École Nationale Supérieure des Mines de Nancy 2nde Année Table des matières I PHP 2 1 Les bases 2 1.1 Introduction........................................

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation Introduction JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

Plus en détail

Sécurite Web. Xavier Tannier xavier.tannier@limsi.fr. Yann Jacob yann.jacob@lip6.fr

Sécurite Web. Xavier Tannier xavier.tannier@limsi.fr. Yann Jacob yann.jacob@lip6.fr Sécurite Web Xavier Tannier xavier.tannier@limsi.fr Yann Jacob yann.jacob@lip6.fr Généralités 80 % des sites contiennent au moins une faille de sécurité 24 familles de failles différentes : on ne présente

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie JAVASCRIPT JS08-Gestion des cookies-consignes Accueil Apprentissage Période

Plus en détail

Présentation de HTML5

Présentation de HTML5 Présentation de HTML5 Option Web Multimédia Polytech Paris-Sud cycle préparatoire 2e année Claude Barras (claude.barras@u-psud.fr) Université Paris-Sud & LIMSI-CNRS 22 septembre 2014 Introduction HTML5

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2015-2016 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/74 Introduction De nombreux sites

Plus en détail

Programmation Web : Cours. IUT de Villetaneuse.

Programmation Web : Cours. IUT de Villetaneuse. Programmation Web : Cours 2 ème année IUT de Villetaneuse. Mathieu Lacroix 1 3 septembre 2015 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ I.U.T.

Plus en détail

Projets. Conception de Sites Web dynamiques. Programme. Projets. Présentation d'un sujet du web 06/03/2010. Cours 7.

Projets. Conception de Sites Web dynamiques. Programme. Projets. Présentation d'un sujet du web 06/03/2010. Cours 7. Projets Conception de Sites Web dynamiques Cours 7 Patrick Reuter 1. Site de rencontre (utilisateurs, rechercher un correspondant) 2. Messagerie privée (éventuellement à combiner avec 1.) 3. Gestion d

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

http://api.allocine.fr/rest/v3/search?partner=yw5kcm9pzc12m3m&q=avatar http://api.allocine.fr/rest/v3/movie?code=61282&partner=yw5kcm9pzc12m3m

http://api.allocine.fr/rest/v3/search?partner=yw5kcm9pzc12m3m&q=avatar http://api.allocine.fr/rest/v3/movie?code=61282&partner=yw5kcm9pzc12m3m SERVICES WEB Nicolas Singer L API ALLOCINE Allociné - www.allocine.com - est un site web donnant accès à une base de données de films et de séries télévisées. Cet accès est aussi possible par des services

Plus en détail

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

Plus en détail

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau.

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau. Introduction à Javascript IUT de Fontainebleau 17 décembre 2014 1 Introduction 2 3 Sommaire Introduction 1 Introduction 2 3 Une application Web est une applications clients/serveur(s) On peut la voir en

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

Plus en détail

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML PHP virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/ BUR Internet et HTML PHP, qu'est-ce que c'est? Un langage pour la programmation du serveur Permet d'inclure des parties programmées

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Programmation web : TD 2

Programmation web : TD 2 Programmation web : TD 2 Email : nassim.bahri@yahoo.fr Site web : http://nassimbahri.ovh Nassim BAHRI Objectif Développer des pages Web HTML5 validées Mettre en place des listes en HTML Avant de commencer

Plus en détail

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2.

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2. JavaScript pour le Web 2.0 Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto Thierry Templier Arnaud Gougeon 4 Programmation DOM Avant la standardisation du DOM, chaque navigateur

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Gestion d email dans votre site

Gestion d email dans votre site Gestion d email dans votre site Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Dans ce chapitre, vous allez apprendre à envoyer un message e-mail

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Présentation. Les surnoms de JS. Historique. Programmation Web

Présentation. Les surnoms de JS. Historique. Programmation Web Présentation Programmation Web JavaScript Jean-Christophe Deneuville jean-christophe.deneuville@xlim.fr Historique JavaScript est un langage reprenant quelques éléments de syntaxe de Java On l intègre

Plus en détail

Un jour, une question Réponse à une problématique issue de la liste GTA *

Un jour, une question Réponse à une problématique issue de la liste GTA * Un jour, une question Réponse à une problématique issue de la liste GTA * GTA* : Groupe de Travail AccessiWeb LE NIVEAU D ACCESSIBILITÉ DES BOUTONS DE PARTAGE DE CONTENU DES RÉSEAUX SOCIAUX Victor Brito

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013 Initiation HTML 5 / CSS 3 Clément Bourgoin cb@nokto.net v1.0-17/01/2013 1. Les langages du web Pour créer un site web, on utilise au moins deux langages : le HTML et le CSS. Il en existe d'autres mais

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Guide d installation

Guide d installation Guide d installation Bonjour! Je suis Romain, votre guide durant la découverte de l installation de Nosto! Nous allons voir dans ce guide comment installer Nosto en 7 étapes clés. Nous verrons ensemble

Plus en détail

Tp2 Emacs Développement Web

Tp2 Emacs Développement Web Tp2 Emacs Développement Web Les indications ci-dessous donnent les grandes lignes du développement. 1/ Evenement Ajax Jquery: Le code javascript jquery suivant permet d afficher un message dans un span

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

Présentation du périmètre technique

Présentation du périmètre technique Présentation du périmètre technique Kit d intégration des fonctions de réservation Open System au sein d un site d information Alliance Réseaux v09012014 1 KIT D INTEGRATION DES FONCTIONS DE RESERVATION

Plus en détail

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes Symfony 2 Sommaire : 1.Définition de symfony 2 2.Installation 3.Structure 4.Symfony et les commandes 5.Le fonctionnement : le routeur (les url), les bundles, twig(templates) 6.L architecture de symfony2

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

TD 1 - Programmation Web avec PHP (1)

TD 1 - Programmation Web avec PHP (1) TD 1 - Programmation Web avec PHP (1) CORRIGE DU TD 1 Objectif : créer des scripts du côté serveur avec PHP, utiliser quelques fonctionnalités Internet de PHP Attention : si vous recréez des pages PHP

Plus en détail

Rapport de Conception

Rapport de Conception Rapport de Conception Métier : Développement Membres du groupe Granier Maxime Imbert Jérémy Lansac Ludovic Tionohoue Yann Axone Métiers consultés IHM Contenu cispmptut_rapportdeconception_developpement_20110111

Plus en détail

Manipulation de formulaire

Manipulation de formulaire 1 Manipulation de formulaire points abordés outils (et balises) de création de formulaire, javascript, validation de formulaire en php site de départ nous nous baserons sur cette version pour l'exercice

Plus en détail

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr Technologies de l Internet Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr DHTML : Introduction Objectif : créer des pages dynamiques objets qui apparaissent/disparaissent/changent (ex. menus)

Plus en détail

CREATE TABLE `blog` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, `title` VARCHAR( 128 ) NOT NULL,

CREATE TABLE `blog` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, `title` VARCHAR( 128 ) NOT NULL, Créer un blog en 20 mn Tout d abord, créer la base de données qui contiendra le blog Avec phpmyadmin définir une base de données de nom blog Définir une table de nom entries Dans cette table, on créera

Plus en détail

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Td3 M r Castanet - Année scolaire 2007/2008 - page 1 Exercice 1 Dans cet exercice, nous allons appréhender les méthodes pour transférer notre site chez un hébergeur. Mais nous déplacerons notre

Plus en détail

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2)

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie

Plus en détail

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc 2013 Introduction à Ajax CNAM le 2013 O. Pons S. Rosmorduc 1 / 18 Principe général de fonctionnement Faire des requettes http sans avoir recharger une page entiere. Communication de javascript avec les

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail