AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012
|
|
|
- Jeanne Métivier
- il y a 7 ans
- Total affichages :
Transcription
1 AJAX Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-le-Rouet
2 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
3 Présentation d AJAX agenda chat liste de tâches Google maps
4 Présentation d AJAX Asynchronous Javascript And XML Combinaison de technologies : (X)HTML & CSS présentation et contenu DOM manipulation du contenu Objet XMLHttpRequest communication avec le serveur XML échange de données (pas obligatoire texte, JSON) JavaScript I synchrone asynchrone Jesse James Garrett Ajax: A New Approach to Web Applications
5 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
6 Principe AJAX Actualiser une partie d une page web
7 Principe AJAX HTML serveur 1
8 Principe AJAX 2 HTML serveur 1
9 Principe AJAX 2 JS 3 Requête XMLHTTP HTML serveur 1 pays=angleterre
10 Principe AJAX 2 JS 3 Requête XMLHTTP HTML serveur 1 pays=angleterre Londres, Manchester 4 Texte brut ou extrait de code HTML ou JSON ou XML
11 Principe AJAX 2 JS 3 Requête XMLHTTP HTML serveur 1 pays=angleterre 5 JS + DOM Londres, Manchester Texte brut ou extrait de code HTML ou JSON ou XML 4
12 Plan Présentation d AJAX Principe Etapes 1. page web HTML 2. script côté serveur 3. script JavaScript Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
13 Etape 1 page web HTML <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "hmp:// strict.dtd"> <html xmlns="hmp:// <head> <Utle>test</Utle> <script type="text/javascript" src="ajax.js"></script> </head> <body> <form acuon="traite_form.php" method="post"> <div> Choisir une agence : <br /> Nom <input type="text" name="nom" /> <br /> Pays <select name="pays" onchange="showciues(this.value, 'ciues')"> <opuon value="" selected="selected"></opuon> <opuon value="allemagne">allemagne</opuon> <opuon value="angleterre">angleterre</opuon> <opuon value="belgique">belgique</opuon> <opuon value="espagne">espagne</opuon> <opuon value="france">france</opuon> <opuon value="italie">italie</opuon> </select> <span id="ciues"></span> <br /> <input type="submit" value="envoyer" class="bumon" /> </div> </form> </body> </html> JS JS 1. Page web HTML - Inclure un script JavaScript - Définir l acuon - IdenUfier la zone à modifier
14 Etape 2 script côté serveur (E/S) serveur Requête XMLHTTP JS Réponse XMLHTTP Londres;Manchester liste_villes.php 2. Script côté serveur - Entrées : données de la requête - SorEe : JSON/texte/XML
15 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre xml_hmp = new XMLHMpRequest(); // si aucun pays selecuonne 3. Script JS a) Créer la foncuon appelée dans l événement de la page HTML // fin foncuon showciues <span id="ciues"></span>
16 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre xml_hmp = new XMLHMpRequest(); // si aucun pays selecuonne 3. Script JS a) Créer la foncuon appelée dans l événement de la page HTML // fin foncuon showciues html <span id="ciues"></span> head body title texte script form div span node texte br texte input br texte select span br input option option
17 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre xml_hmp = new XMLHMpRequest(); // si aucun pays selecuonne 3. Script JS b) Créer l objet XMLHMpRequest // fin foncuon showciues <span id="ciues"></span> span node
18 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ 3. Script JS c) Définir le gesuonnaire d événements (appelé quand l état de l objet change) // fin foncuon showciues <span id="ciues"></span> // fin foncuon anonyme Etats de l objet span node 0 : UNSENT objet construit 1 : OPENED objet iniualisé (méthode open) 2 : HEADERS_RECEIVED requête envoyée au serveur (méthode send) 3 : LOADING réponse en cours de chargement 4 : DONE terminé
19 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète // fin foncuon showciues <span id="ciues"></span> // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme Etats de l objet span node 0 : UNSENT objet construit 1 : OPENED objet iniualisé (méthode open) 2 : HEADERS_RECEIVED requête envoyée au serveur (méthode send) 3 : LOADING réponse en cours de chargement 4 : DONE terminé
20 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur : format texte/json : propriété responsetext format XML : propriété responsexml // fin foncuon showciues <span id="ciues"></span> Londres;Manchester span node // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme
21 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulauon de l arbre du document) // fin foncuon showciues <span id="ciues"></span> Londres;Manchester span node // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme tab_villes Londres Manchester 0 1
22 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne // fin foncuon showciues xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ <span id="ciues"></span> var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<opuon value="' + i + '">' + tab_villes[i] + '</opuon>'; node.innerhtml = 'Ville <select name="city">' + code_html + '</select>'; else { node.innerhtml = 'echec'; // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme tab_villes 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulauon de l arbre du document) <opuon value="0">londres</opuon> <opuon value="1">manchester</opuon> Londres 0 1 span Manchester code_html node
23 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); for (var i = 0; i < tab_villes.length; i++) { // fin foncuon showciues <span id="ciues"></span> code_html += '<opuon value="' + i + '">' + tab_villes[i] + '</opuon>'; node.innerhtml = 'Ville <select name="city">' + code_html + '</select>'; else { node.innerhtml = 'echec'; // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulauon de l arbre du document) Ville <select name="city"> <opuon value="0">londres</opuon> <opuon value="1">manchester</opuon> </select> span node
24 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; cities Angleterre // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); for (var i = 0; i < tab_villes.length; i++) { // fin foncuon showciues code_html += '<opuon value="' + i + '">' + tab_villes[i] + '</opuon>'; node.innerhtml = 'Ville <select name="city">' + code_html + '</select>'; else { node.innerhtml = 'echec'; // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme 3. Script JS c) Définir le gesuonnaire d événement - AMendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulauon de l arbre du document) <span id="ciues"> Ville <select name="city"> <opuon value="0">londres</opuon> <opuon value="1">manchester</opuon> </select> </span> texte span option Londres select node option Manchester
25 Etape 3 script JavaScript funceon showciues(pays, id_elt) { var node = null; var xml_hmp = null; Angleterre try { node = document.getelementbyid(id_elt); if (pays.length == 0) { node.innerhtml = ''; return; // si aucun pays selecuonne xml_hmp = new XMLHMpRequest(); xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if ((this.readystate == 4) && (this.status == 200)) { if (this.responsetext.length > 0){ tab_villes = this.responsetext.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<opuon value="' + i + '">' + tab_villes[i] + '</opuon>'; node.innerhtml = 'Ville <select name="city">' + code_html + '</select>'; else { node.innerhtml = 'echec'; // fin etat 4 DONE et reponse HTTP 200 // fin foncuon anonyme // envoyer la requete xml_hmp.open("get", "liste_villes.php?pays=" + pays, true); // asynchrone xml_hmp.send(null); // GET - > pas de donnees catch (e) { return; // fin foncuon showciues 3. Script JS d) Envoyer la requête au serveur web - Récupérer les données à envoyer au serveur - IniUaliser (méthode open) - Envoyer (méthode send)
26 Etape 3 script JavaScript Envoyer la requête au serveur web par la méthode GET xml_hmp.open("get", "liste_villes.php?pays=" + pays, true); xml_hmp.send(null); // GET - > pas de donnees Envoyer la requête au serveur web par la méthode POST xml_hmp.open("post", "liste_villes.php", true); xml_hmp.setrequestheader("content- type", "applicauon/x- www- form- urlencoded"); xml_hmp.send("pays=" + pays); // POST - > donnees
27 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
28 Prendre en compte la latence Informer l uulisateur qu une opérauon est en cours en tâche de fond xml_hmp.onreadystatechange = funceon(){ var tab_villes = new Array(); var code_html = ''; if (this.readystate < 4){ node.innerhtml = "<img src='loader.png' alt='loading '>"; else { // si etat 4 DONE et que code reponse HTTP 200 manipuler le DOM pour afficher le select // fin foncuon anonyme
29 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
30 Support par les navigateurs IE 5 introduit un contrôle ActiveX XMLHTTP XMLHttpRequest Firefox Mozilla 1.0+ (Netscape 7) Chrome Safari 1.2+ Opera 8.0+ IE 7+
31 Support par les navigateurs funceon getxmlhmpobject(){ var xml_hmp_obj = null; try { xml_hmp_obj = new XMLHMpRequest(); // Firefox, IE >= 7, Safari, Opera, Chrome catch(e){ try{ xml_hmp_obj = new AcUveXObject("Msxml2.XMLHTTP"); // IE 6 catch(e){ alert ("Browser does not support Ajax"); return xml_hmp_obj;
32 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
33 Inconvénients navigateur JavaScript activé support de l objet XMLHttpRequest => prévoir une version qui fonctionne sans Ajax navigation historique de navigation (boutons back/forward) => fonction de callback qui restaure la page signets sécurité JavaScript activé pas d indexation du contenu dynamique latence
34 Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages
35 Avantages Amélioration de l expérience utilisateur mise à jour locale de la page supprime l effet de rafraîchissement de la page entière diminution des temps d attente (réponse plus rapide aux actions de l utilisateur ) contrôle en temps réel du contenu des formulaires asynchrone => permet de continuer à remplir un formulaire Réduction de la bande passante seule l information nécessaire est transmise Réduction de la charge du serveur une partie des traitements est réalisée par le client (mise en page du résultat) le serveur n a pas à générer la totalité de la page à chaque demande Aucune installation nécessaire (pas de plugin) AJAX, utilisé à bon escient, fournit une expérience utilisateur similaire à celle des applications installées sur l ordinateur.
36 En savoir plus W3C XMLHttpRequest Level 2 Working Draft Ajax: A New Approach to Web Applications J.J. Garrett Ajax Tutorial Ajax loader icon Liste Frameworks Ajax Firebug (Onglet Net XHR) OWASP Ajax and Other «Rich» Interface Technologies OWASP Ajax Security Guidelines
DOM - Document Object Model
DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et
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
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
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
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
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/
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
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
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.
Module BD et sites WEB
Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD
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...
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
Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs
Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement
Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
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
Ajax, RIA et HTML5. 9.1 Prise en charge d Ajax
9 Ajax, RIA et HTML5 Au soaire de ce chapitre UU Prise en charge d Ajax UU Bibliothèques JavaScript UU Extensions CSS de WebKit UU Applications Internet riches mobiles UU HTML5 Ajax, HTML5 et RIA, coent
WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
Dans l'article précédent, vous avez appris
Pour les débutants Les différents formats de sortie proposés par PHPExcel La bibliothèque orientée objet PHPExcel permet de lire et créer des fichiers pour tableurs. Dans cette série d articles, vous apprendrez
Panel des technologies Web
Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant
Cette application développée en C# va récupérer un certain nombre d informations en ligne fournies par la ville de Paris :
Développement d un client REST, l application Vélib 1. Présentation L application présentée permet de visualiser les disponibilités des vélos et des emplacements de parking à la disposition des parisiens
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 La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
Introduction. Passage de sites statiques à des sites dynamiques
PHP (ET MYSQL) Introduction HTML : pages destinées à être publiées sur Internet Texte à afficher + instructions de mise en page Pas d instructions de calcul ou de traitements conditionnels Des sites de
BES WEBDEVELOPER ACTIVITÉ RÔLE
BES WEBDEVELOPER ACTIVITÉ Le web developer participe aux activités concernant la conception, la réalisation, la mise à jour, la maintenance et l évolution d applications internet/intranet statiques et
EXPOSE. La SuisseID, qu est ce que c est? Secrétariat d Etat à l Economie SECO Pierre Hemmer, Chef du développement egovernment
EXPOSE La SuisseID, qu est ce que c est? Association Romande des Informaticiens ARI Vendredi 18 juin 2010 Secrétariat d Etat à l Economie SECO Pierre Hemmer, Chef du développement egovernment 1 Table des
Gestion du cache dans les applications ASP.NET
Gestion du cache dans les applications ASP.NET Version 1.0 James RAVAILLE http://blogs.dotnet france.com/jamesr 2 Gestion du cache dans les applications ASP.NET v 1.0 03/01/09 Sommaire 1 Introduction...
Attaques de type. Brandon Petty
Attaques de type injection HTML Brandon Petty Article publié dans le numéro 1/2004 du magazine Hakin9 Tous droits reservés. La copie et la diffusion de l'article sont admises à condition de garder sa forme
les techniques d'extraction, les formulaires et intégration dans un site WEB
les techniques d'extraction, les formulaires et intégration dans un site WEB Edyta Bellouni MSHS-T, UMS838 Plan L extraction des données pour un site en ligne Architecture et techniques Les différents
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Sécurité des applications web. Daniel Boteanu
I F8420: Éléments de Sécurité des applications web Daniel Boteanu Architecture des applications web Client légitime Internet HTTP 浀 HTML Server Web 2 Architecture des applications web Client légitime Internet
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
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
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
Démarrer avec Ajax et le php: exemple d'application
Démarrer avec Ajax et le php: exemple d'application Rédacteur: Alain Messin (Alain.Messin arobas obs-azur.fr) CNRS UMS 2202 Admin06 24/09/2007 Le but de ce document est de permettre de démarrer dans le
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
Activités HTML. Code: act-html
Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:
Failles XSS : Principes, Catégories Démonstrations, Contre mesures
HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,
HTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
Extended communication server 4.1 : VoIP SIP service- Administration
Extended communication server 4.1 : VoIP SIP service- Administration Mai, 2008 Alcatel-Lucent Office Offer - All Rights Reserved Alcatel-Lucent 2007 Ce document explique comment configurer le Service VOIP-SIP
AJAX. (Administrateur) (Dernière édition) Programme de formation. France, Belgique, Suisse, Roumanie - Canada
AJAX (Administrateur) (Dernière édition) Programme de formation Microsoft Partner France, Belgique, Suisse, Roumanie - Canada WWW.SASGROUPE.COM Formez vos salariés pour optimiser la productivité de votre
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
TP JEE Développement Web en Java. Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web.
ASTRIUM - Toulouse JEE Formation 2013 TP JEE Développement Web en Java Dans ce TP nous commencerons la programmation JEE par le premier niveau d une application JEE : l application web. Figure 1 Architecture
Documentation CAS à destination des éditeurs
Documentation CAS à destination des éditeurs Sommaire Préambule... 1 Présentation de CAS...2 Intérêt... 2 Fonctionnement de base...2 Synoptique des échanges (1ère connexion)... 2 Synoptique des échanges
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Aspects techniques : guide d interfaçage SSO
COURDECO Aspects techniques : guide d interfaçage SSO Septembre 2011 Cette annexe présente succinctement le système d'authentification unique (SSO : single sign on, authentification unique) utilisé dans
Formation Website Watcher
Formation Website Watcher Page 1 Comprendre le fonctionnement du Web Glossaire Structure du Web et protocoles Langages webs et veille Page 2 Comprendre le fonctionnement du Web Glossaire Page 3 Nom de
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework L'objectif de ce document est de poser des bases de réflexion sur la modélisation d'un projet réalisé
Mysql avec EasyPhp. 1 er mars 2006
Mysql avec EasyPhp 1 er mars 2006 Introduction MYSQL dérive directement de SQL (Structured Query Language) qui est un langage de requètes vers les bases de données relationnelles. Il en reprend la syntaxe
Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
Master1 ère année. Réseaux avancés I. TP nº5 filière ISICG
Master1 ère année Réseaux avancés I TP nº5 filière ISICG Utilisation de la microplateforme Bottle et du framework AngularJS La «micro web-framework» Bottle pour Python Les principales caractèristiques
Architecture Multi-Niveaux
Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une
creer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2
Développement des Systèmes d Information
Développement des Systèmes d Information Axe ISI Camille Persson Institut Fayol / LSTI / ISCOD École Nationale Supérieure des Mines de Saint-Etienne 158 cours Fauriel, 42000 Saint-Etienne persson@emse.fr
Architecture Orientée Service, JSON et API REST
UPMC 3 février 2015 Précedemment, en LI328 Architecture générale du projet Programmation serveur Servlet/TOMCAT Aujourd hui Quelques mots sur les SOA API - REST Le format JSON API - REST et Servlet API
< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
PLUGINS Guide du Développeur STEPHANE FERRARI. P l u X m l 5.4
PLUGINS Guide du Développeur STEPHANE FERRARI P l u X m l 5.4 Table des matières Présentation de PluXml...5 Principales caractéristiques...5 Pré-requis...6 Procédure d'installation...6 Procédure de mise
Logiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
Développer des Applications Internet Riches (RIA) avec les API d ArcGIS Server. Sébastien Boutard Thomas David
Développer des Applications Internet Riches (RIA) avec les API d ArcGIS Server Sébastien Boutard Thomas David Le plan de la présentation Petit retour sur les environnements de développement ArcGIS Server
Petite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)
Présentation du langage XML 1. De SGML à XML 17 2. Les bases de XML 18 2.1 Rappel sur HTML 18 2.2 Votre premier document XML 19 2.3 Les avantages de XML 21 3. La syntaxe XML 21 3.1 La première ligne du
CHAPITRE 11. Temps réel Remy Sharp
CHAPITRE 11 Temps réel Remy Sharp LE WEB EN TEMPS RÉEL fait partie de ces aspects d Internet qu on apprécie d utiliser mais qui peuvent être assez effrayants quand il faut les mettre en place. Ce chapitre
Sécurité des sites Web Pas un cours un recueil du net. INF340 Jean-François Berdjugin
Sécurité des sites Web Pas un cours un recueil du net INF340 Jean-François Berdjugin Vulnérabilité Définition (wikipédia) : Dans le domaine de la sécurité informatique, une vulnérabilité est une faiblesse
4. SERVICES WEB REST 46
4. SERVICES WEB REST 46 REST REST acronyme de REpresentational State Transfert Concept introduit en 2000 dans la thèse de Roy FIELDING Est un style d architecture inspiré de l architecture WEB En 2010,
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
CONCOURS DE L AGRÉGATION INTERNE «ÉCONOMIE ET GESTION» SESSION 2015 SECONDE ÉPREUVE
CONCOURS DE L AGRÉGATION INTERNE «ÉCONOMIE ET GESTION» SESSION 2015 SECONDE ÉPREUVE Épreuve de cas pratique dans la spécialité correspondant à l'option choisie par le candidat Option D Durée de préparation
Bonnes pratiques de développement JavaScript
Bonnes pratiques de développement JavaScript Titre présentation Conférencier François Béliveau Romain Dorgueil A propos de nous... François Béliveau Développeur web depuis 8 ans Utilise symfony depuis
Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS
Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team
Attaques applicatives
Attaques applicatives Attaques applicatives Exploitation d une mauvaise programmation des applications Ne touche pas le serveur lui-même mais son utilisation/ configuration Surtout populaire pour les sites
.ARCHITECTURE ET FONCTIONNEMENT
GPS GPRS Internet Web services Client SOMMAIRE. Architecture et fonctionnement...3 Boîtier Télématique Embarqué...4 Architecture Plateforme Télématique...5 Kilométrage Alertes Moteur...6 Géolocalisation...7
AWS avancé. Surveiller votre utilisation d EC2
10 AWS avancé Dans ce chapitre, nous bâtirons sur les bases que nous avons apprises jusqu ici. Nous étudierons des sujets plus avancés tels que la surveillance de votre utilisation d AWS, l utilisation
API SMS CONSEIL HTTP V2.01. Sommaire. Documentation V1.0 au 21/05/2011
API SMS CONSEIL HTTP V2.01 Documentation V1.0 au 21/05/2011 L'utilisation de l'api SMS CONSEIL est réservée aux clients, membres du site SMS-CONSEIL.FR et doit se faire en accord avec nos conditions générales
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel
Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel Excel est un des meilleurs outils de manipulation de données et parfois il est nécessaire d exploiter des données
Technologies Web. Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya. Université Pierre et Marie Curie
1 / 22 Technologies Web Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya Université Pierre et Marie Curie Rappel 2 / 22 Problématique Quelles technologies utiliser
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Le stockage local de données en HTML5
Le stockage local HTML5, pourquoi faire? Dans une optique de réduction des couts de maintenance, de déploiement, beaucoup d'entreprises ont fait le choix de migrer leurs applicatifs (comptables, commerciales,
dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7
dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 Sommaire 1 Configuration requise pour accéder au DMP... 3 2 Procédure de vérification sous Internet Explorer... 4 2.1 Vérification de la compatibilité
PLATE-FORMES LIBRES *AMP CYBER PAIEMENT / CYBER PLUS PAIEMENT GUIDE DE MIGRATION FACILE ET EN UNE HEURE PLATE-FORME SYSTEMPAY
PLATE-FORMES LIBRES *AMP CYBER PAIEMENT / CYBER PLUS PAIEMENT GUIDE DE MIGRATION FACILE ET EN UNE HEURE PLATE-FORME SYSTEMPAY Référence Version 2 Auteur V. Graux Date 30/05/10 Dernière page 20 Guide de
Sessions en ligne - QuestionPoint
Sessions en ligne - QuestionPoint Configuration du navigateur Internet Explorer Dernière mise à jour : 12 mai 2012 Vous trouverez dans ce guide les procédures pour configurer votre navigateur Internet
Le Web de Données Dan VODISLAV Université de Cergy-Pontoise Master Informatique M2 Plan
Le Web de Données Dan VODISLAV Université de Cergy-Pontoise Master Informatique M2 Plan RDF sur le Web Micro-formats Micro-données RDFa Vocabulaires communs Dublin Core, FOAF, SKOS Linked Open Data Architecture
Jean-Pierre VINCENT Consultant indépendant
Techniques d accélération des pages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org Bonjour, je m appelle Jean-Pierre 13 ans de Web PHP, JavaScript, HTML5, CSS Ex : startups,
Stockage du fichier dans une table mysql:
Stockage de fichiers dans des tables MYSQL avec PHP Rédacteur: Alain Messin CNRS UMS 2202 Admin06 30/06/2006 Le but de ce document est de donner les principes de manipulation de fichiers dans une table
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
Géolocalisation. Remy Sharp
Chapitre 9 Géolocalisation Remy Sharp L API de géolocalisation fait partie de ces API qui n ont rien à voir avec la spécification HTML5 ; elle a d ailleurs été créée par le W3C et non par le WHATWG. En
PDO : PHP Data Object 1/13
PDO : PHP Data Object 1/13 Tous ne sont que des extensions... Les fonstions mysql_* : API mysql Les fonctions mysqli_* aussi Il en est de même pour PDO PDO (avec le pilote PDO MySQL Driver et Extension
Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs.
Le framework YUI et le développement 4D Par Olivier DESCHANELS, Responsable Programme 4D S.A. Note technique 4D-201004-08-FR Version 1 - Date 1 avril 2010 Résumé Dans la présente note technique, nous allons