Les API de HTML5. Michel Gagnon École Polytechnique de Montréal

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Les API de HTML5. Michel Gagnon École Polytechnique de Montréal"

Transcription

1 Les API de HTML5 Michel Gagnon École Polytechnique de Montréal

2 Cache d application L idée ici consiste à garder en cache les ressources nécessaires pour continuer à utiliser une application web même si on est hors ligne Il faut un fichier manifeste pour déterminer ce qui doit être mis en cache Au moins un des documents HTML de l application doit faire un lien avec le manifeste: <html manifest="exemple.appcache"> </html> Un document qui contient un tel lien sera automatiquement mis dans la cache d application correspondant au manifeste, avec tous les autres documents requis pour cette application, tel que spécifié par le manifeste (on dit que c est un document «maître»)

3 Cache d application Le processus de chargement d une page est alors modifié: Le navigateur essaie d abord de charger la page à partir de la cache d application Le navigateur vérifie alors avec le serveur si le manifeste a été modifié Si c est le cas, il recharge à nouveau la cache avec les documents spécifiés dans le manifeste Important: Si le manifeste ne change pas, et que le contenu d une ressource est modifié, la cache ne sera pas mise à jour Il faudra alors modifier le manifeste (normalement on change un numéro de version)

4 Fichier manifeste Type MIME: text/cache-manifest Contient 3 sections: CACHE (par défaut, la première section) : spécifie les ressources qui doivent être mises en cache NETWORK : spécifie les ressources qui doivent toujours être téléchargées du serveur FALLBACK : spécifie la ressource à utiliser en remplacement si une ressource n a pu être obtenue du serveur

5 Exemple de manifeste CACHE MANIFEST # v # This is another comment index.html cache.html style.css image1.png # Fallback content FALLBACK: / fallback.html # Use from network if available NETWORK: network.html

6 Stockage local Deux possibilités: L information disparaît après la fin de la session, c està-dire lorsque l onglet contenant la page est fermé, ou lorsque le navigateur est fermé (objet localstorage) L information est persistante (objet sessionstorage) Dans les deux cas, on stocke des paires attribut/valeur L espace de stockage est associé au domaine du site web (deux pages du même domaine peuvent accéder à la même information du stockage local

7 Stockage local exemple simple <!DOCTYPE html> <html lang="en"> <head> </head> <body> <p> Cliquez <a href="/exemples/stockagelocal/autrepage.html">ici</a> pour charger une page qui partage le stockage local</p> <fieldset> <legend>stockage local</legend> <label for="localdata"> Ceci sera persistant:</label> <input id="localdata"><br> <label for="sessiondata"> Ceci sera conservé durant la session:</label> <input id="sessiondata"> </fieldset> <div> <button onclick="savedata()">sauvegarder</button> <button </div> </body> </html> onclick="loaddata()">récupérer</button>

8 Stockage local exemple simple <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script> function savedata() { localstorage.setitem("localdata", $("#localdata").val()); sessionstorage.setitem("sessiondata", $("#sessiondata").val()); } function loaddata() { if (localdata!= null) { $("#localdata").val(localstorage.getitem("localdata")); } if (sessiondata!= null) { $("#sessiondata").val(sessionstorage.getitem("sessiondata")); } } </script> </head> <body> </body> </html>

9 Stockage local exemple simple Adapté de M. McDonald, HTML5, The Missing Manual, O Reilly, 2014

10 AJAX Principe: communiquer avec le serveur pour obtenir des données qui seront utilisées (en général) pour modifier le document sans recharger la page Deux manières courantes de l implémenter: Utilisation de l objet XMLHttpRequest Utilisation d un élément <script> En général, le serveur envoie le contenu demandé dans un des formats suivants: texte, HTML, XML, JSON Technique asynchrone

11 XMLHttpRequest 1. On crée une instance de XMLHttpRequest 2. On attache un gestionnaire à l événement readystatechange 3. On ouvre la connexion (méthode open()) 4. On envoie la requête (méthode send()) 5. Dans le gestionnaire, on teste la valeur de l attribut readystate, et on traite les informations reçues lorsque la valeur de cet attribut est 4

12 AJAX- Méthode JSONP On utilise la balise <script> Dès qu on attribue une valeur à l attribut src, la ressource associée sera téléchargée Le serveur doit englober l objet JSON dans un appel de fonction, qui sera alors exécutée par le navigateur (cette fonction doit être déjà définie dans le navigateur) Avantage: la balise <script> n est pas soumise à la contrainte de la «même origine»

13 Méthode JSONP - Exemple <script type="application/javascript" src="http://serveur.exemple.com/res23?callback=moncallback"> </script> <script> function moncallback(data) { alert(data); } </script>

14 Méthode JSONP - Exemple <script type="application/javascript" src="http://serveur.exemple.com/res23?callback=moncallback"> </script> <script> function moncallback(data) { alert(data); } </script> On indique au serveur quelle fonction sera appelée. Il pourra retourner quelque chose comme: moncallback( { attr 1 : val 1, attr n : val n })

15 Méthode JSONP - Exemple <script type="application/javascript" id= "jsonp"> </script> <script> function callback(data) { alert(data); }. Quelque part dans le code, on peut fixer une valeur à l attribut src, une requête sera automatiquement envoyée au serveur. $("#jsonp").attr("src", "http://serveur.exemple.com/res23?callback=moncallback"); </script>

16 AJAX avec jquery Méthode load(): On lui passe une URL Le contenu envoyé par le serveur remplacera celui de l élément sur lequel la méthode est exécutée Exemple: $( #stats ).load( rapport.html ) Arguments supplémentaires possibles: Un ensemble de données à ajouter à la requête Une fonction qui sera exécutée lorsque le traitement de la requête aura été complété

17 AJAX avec jquery Fonction utilitaire $.getscript(): Télécharge et exécute un code Javascript Pas régi par la contrainte de la même origine Fonction utilitaire $.getjson(): Fait une requête avec l URL fournie Parse la réponse JSON et transmet l objet résultant à la fonction passée en paramètre Fonctions $.get() et $.post(): Font une requête avec la méthode correspondante Fonction générique $.ajax(): On lui passe un ensemble de données qui définissent le genre d interaction désiré

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence STIC IUT de Marne-la-Vallée 04/06/2015 Cours de jquery Cours 4 AJAX avec jquery Philippe Gambette Sources Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/li385_c5_jquery.pdf

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

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

INF8007 Langages de script

INF8007 Langages de script INF8007 Langages de script Introspection et parsage 1/27 INF8007 Langages de script Introspection et parsage Michel Desmarais Alexandre Spaeth Génie informatique et génie logiciel École Polytechnique de

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

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

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery Programmation web AJAX Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 AJAX A Jean-Christophe Dubacq (IUTV) Programmation web S3 2013 1 / 33 Le modèle classique Jean-Christophe Dubacq (IUTV) Programmation

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

À 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

Démonstration de la mise en cache via HTML 5 sur iphone

Démonstration de la mise en cache via HTML 5 sur iphone Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent

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

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

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

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

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

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

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL L3 - SITES WEB DYNAMIQUES MINI-WALL 1 Introduction L'objectif de ce TD est de mettre en place un mini "livre d'or", permettant à vos visiteurs de vous laisser des messages sur votre site. Une page affiche

Plus en détail

Applet, Servlet et JSP : des pages Web en action. Philippe Mabilleau ing.

Applet, Servlet et JSP : des pages Web en action. Philippe Mabilleau ing. Carrefour de l information Applet, Servlet et JSP : des pages Web en action Philippe Mabilleau ing. 5 novembre 2002 Des pages Web en action Le Web Des pages Web interactives Applet : de l action du coté

Plus en détail

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement

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.

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

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP.

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. TP2 : PHP Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. 1 3

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

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

4D Business Kit 2.1 et la solution de paiement Sogenactif de la Société Générale

4D Business Kit 2.1 et la solution de paiement Sogenactif de la Société Générale 4D Business Kit 2.1 et la solution de paiement Sogenactif de la Société Générale Contact : http://www.sogenactif.fr Voici l ensemble des fichiers fournis avec 4D Business Kit qui sont concernés par la

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

TP Javascript : Ajax, Api & Mashups

TP Javascript : Ajax, Api & Mashups ATTENTION : les codes sources qui se trouvent dans cette page sont à prendre avec prudence pour 2 raisons : 1/ j ai pu faire des erreurs (éhh oui) 2/ Word a pu modifier des caractères comme les ou les

Plus en détail

Ecole Nationale Supérieure des Télécommunications Les outils XML

Ecole Nationale Supérieure des Télécommunications Les outils XML Ecole Nationale Supérieure des Télécommunications Les outils XML Page 1 sur 13 SOMMAIRE 1 Introduction 3 2 Parseur XML et processeur XSLT 4 2.1 Le Parseur XML v2 4 2.1.1 Les API DOM et SAX 4 2.1.2 Le parseur

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

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur?

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur? Les 2 grands métiers autour de la création Web Mais où est passé l'intégrateur? Langages et frameworks Outils spécifi ques dev mobile À voir dans le module multimédia... Langage : Java Objective C C#,...

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

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau.

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau. Ajax IUT de Fontainebleau 1 er mars 2015 Sommaire Introduction 1 Introduction 2 3 4 Sommaire Introduction 1 Introduction 2 3 4 Introduction AJAX se base sur l objet JavaScript XMLHttpRequest qui permet

Plus en détail

Expressions communes. Détection du type de navigateur

Expressions communes. Détection du type de navigateur 2 Expressions communes Certaines tâches JavaScript récurrentes doivent être réalisées quasiment chaque jour. Elles sont à la base de nombreuses applications JavaScript mais n entrent dans aucune catégorie

Plus en détail

Projet Biblio Tech. L application : La mission : Victor Varadaradjou SIO22

Projet Biblio Tech. L application : La mission : Victor Varadaradjou SIO22 Projet Biblio Tech L application : Biblio Tech est une application Android qui, scan les codes barre des livres. L'application se base sur l API de Scandit pour la reconnaissance du code-barre par l appareil

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

Javascript et les applications Web

Javascript et les applications Web Javascript et les applications Web APIs récentes ou en cours d adoption Télécom ParisTech Jean-Claude Moissinac Octobre 2014 Avec l aide de Jean-Claude Dufourd Et Thomas Bertrand Mastère CPD Javascripts,

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

Introduction. AngularJS.

Introduction. AngularJS. <!doctype html> Introduction Introduction Développement Web 2 Bertrand Estellon Aix-Marseille Université April 1, 2014 Bertrand Estellon (AMU) Développement Web 2 April 1, 2014 1 / 436 Introduction Introduction : simplifie

Plus en détail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

Plus en détail

Programmation du Web : Présentation du Web dynamique

Programmation du Web : Présentation du Web dynamique Programmation du Web : Présentation du Web dynamique Jean-Baptiste Vioix (Jean-Baptiste.Vioix@u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-8 Présentation Nécessité du web dynamique

Plus en détail

TP Projet Informatique : Persistance en Php et prise en main GIT / Atlassian

TP Projet Informatique : Persistance en Php et prise en main GIT / Atlassian TP Projet Informatique : Persistance en Php et prise en main GIT / Atlassian Objectif : faire un site pour gérer des articles par catégorie. Chaque catégorie a un nom, chaque catégorie est constitué d

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

Module: Programmation sites Web Dynamique

Module: Programmation sites Web Dynamique Module: Programmation sites Web Dynamique Formateur: A BENDAOUD LEÇON : MÉTHODES DE NAVIGATION Les différentes méthodes de navigation : Voici les différentes méthodes que nous allons expliciter dans cette

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

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

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML HTML 5 HTML 5 Nouveau standard en développement basé sur HTML et XHTML Supporté partiellement par les navigateurs: Safari, Chrome, Firefox, et Opera supportent une partie de HTML5 Caractéristiques: Éléments

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

Comment extraire l information de pages web

Comment extraire l information de pages web Comment extraire l information de pages web Zhentao Li École Normale Supérieure 2 avril 2014 Zhentao Li (École Normale Supérieure) Comment extraire l information de pages web 2 avril 2014 1 / 11 Extraire

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

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

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

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

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

Plus en détail

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Université Claude Bernard Lyon 1 UFR d informatique avril 2006 MIAG soir Systèmes d Information Méthodes Avancées TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Introduction Dans ce

Plus en détail

Rendu multi-support DOCUMENTATION

Rendu multi-support DOCUMENTATION DOCUMENTATION Rendu multi-support Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par la simplicité

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

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

Systèmes d'informations

Systèmes d'informations Systèmes d'informations C'est un ensemble d'outils pour stocker / gérer / diffuser des informations / des données Le stockage : Bases de données + SGDBR La gestion : Saisie, Mise à jour, Contrôle La diffusion

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

Mozilla web-app. Les applications web de Mozilla. Yoann DUVAL 10/12/2012

Mozilla web-app. Les applications web de Mozilla. Yoann DUVAL 10/12/2012 Mozilla web-app Les applications web de Mozilla Yoann DUVAL 10/12/2012 Introduction Différentes plateformes et différents systèmes Les technologies web évolues Application ou site internet? Mozilla open

Plus en détail

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2 LIRMM Université Montpellier 2 May 13, 2009 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications

Plus en détail

Programmation Web IMAC 2015-2016 TD 8 : API. 25 novembre 2015

Programmation Web IMAC 2015-2016 TD 8 : API. 25 novembre 2015 Programmation Web IMAC 2015-2016 TD 8 : API 25 novembre 2015 Objectif: Ce TD a pour but d introduire les APIs, avec plusieurs exemples, et voir comment les utiliser pour récupérer des données depuis des

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

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

É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

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

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

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

L1 Option Programmation Web côté Serveur - Contrôle continu n 1

L1 Option Programmation Web côté Serveur - Contrôle continu n 1 L Option Programmation Web côté Serveur - Contrôle continu n Veuillez noircir les cases correspondantes à votre numéro d étudiant ( case/colonne). Si votre N est, il faut noircir le dans la ère colonne,

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

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

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

Ajax, RIA et HTML5. 9.1 Prise en charge d Ajax

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

Plus en détail

Pourquoi et comment optimiser son site internet pour les moteurs de recherche?

Pourquoi et comment optimiser son site internet pour les moteurs de recherche? Pourquoi et comment optimiser son site internet pour les moteurs de recherche? Moteurs basés sur des algorithmes complexes Aucune publication du fonctionnement Formule de classement classé Top Secret Constats

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

Documentation technique

Documentation technique MEEVY Documentation technique Juillet 200 MEEVY a pour but de fournir aux artistes des outils pour promouvoir leur musique sur internet et proposer à l auditeur une plateforme de musique en ligne gratuite

Plus en détail

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur Plan Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr 7.1 Principe 7.2 Rappels HTTP 7.3 Le serveur web Tomcat Programmation Web coté serveur JSP 2/28 (rappel) génération de pages-web

Plus en détail

Développement Web Frameworks AJAX

Développement Web Frameworks AJAX 1 / 27 Développement Web Frameworks AJAX Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer 2009 2 / 27 Objectif Objectif du cours découverte de quelques frameworks

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic XML - Semaine 6 Pierre Nerzic février-mars 2016 1 / 42 Pierre Nerzic Le cours de cette semaine présente l API XML DOM permettant de produire et traiter un document XML : Principes, Création et modification

Plus en détail

DOM - Document Object Model

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

Plus en détail

Programmation du Web : Présentation du protocole HTTP

Programmation du Web : Présentation du protocole HTTP Programmation du Web : Présentation du protocole HTTP Jean-Baptiste Vioix (jean-baptiste.vioix@iut-dijon.u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-14 Présentation générale Le

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

JOOMLA! Définition. Compsition

JOOMLA! Définition. Compsition JOOMLA! Définition Joomla est un Systeme de Gestion de Contenu ou en anglais CMS, qui est un logiciel qui est apparu en 2005 est écrit en PHP en utilisant une base de donnée MYSQL. Grâce à ses fonctionnalité

Plus en détail

Développement d'applications basées sur la recherche (API REST)

Développement d'applications basées sur la recherche (API REST) Développement d'applications basées sur la recherche (API REST) Samuel Levesque Architecte organique SharePoint 23 mai 2015 SÉBASTIEN SAMUEL Levesque LEVERT a Développeur.Net depuis 2006 Développeur SharePoint

Plus en détail

08/01/2013 www.toubkalit.ma

08/01/2013 www.toubkalit.ma 1 1 - La déclaration des chaînes 2 - Les opérations sur les chaînes 3 - Des exemples utiles 2 Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets (") ou l'apostrophe ('). var chaine1="bonjour";

Plus en détail

L exemple qui est mis à votre disposition a pour but de rechercher les données contenues dans un fichier services.xml fourni :

L exemple qui est mis à votre disposition a pour but de rechercher les données contenues dans un fichier services.xml fourni : TP n 9 Xml/Json 1) Exemple d application analysant un fichier XML L exemple qui est mis à votre disposition a pour but de rechercher les données contenues dans un fichier services.xml fourni : Ce fichier

Plus en détail

Portage d application de Moodle 1.9 vers Moodle 2.x

Portage d application de Moodle 1.9 vers Moodle 2.x Portage d application de Moodle 1.9 vers Moodle 2.x Outils et recommandations à l usage des développeurs. Jean FRUITET Jean.fruitet@univ-nantes.fr Plan Plan Introduction 2 Les principaux i changements

Plus en détail

Programmation Internet Cours 4

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

Plus en détail

Programmation du Web : Présentation et description du langage PHP

Programmation du Web : Présentation et description du langage PHP Programmation du Web : Présentation et description du langage PHP Jean-Baptiste Vioix (jean-baptiste.vioix@iut-dijon.u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-36 Présentation

Plus en détail

TD4 : Wikis, Servlets & Projet

TD4 : Wikis, Servlets & Projet Université Bordeaux 1 T.D. License 3 Informatique 2007 2008 TD4 : Wikis, Servlets & Projet L objet de cette séance est de vous familiariser avec les sockets et les servlets, et d introduire le projet.

Plus en détail

GED MARKETING. Page 1 sur 18

GED MARKETING. Page 1 sur 18 GED MARKETING I. Présentation du produit... 2 II. Page principale de l application... 3 L arbre... 3 Le menu... 4 La fenêtre de navigation... 4 III. La recherche de documents... 4 Rechercher tous les documents...

Plus en détail

Documentation pour se connecter à l application Authôt.

Documentation pour se connecter à l application Authôt. 24/04/2015 API Authôt Documentation pour se connecter à l application Authôt. L EQUIPE Authôt Tél. : 01.71.93.65.00 Email : support@authot.com 1 TABLE DES MATIERES 1 Prérequis... 3 2 Le téléchargement

Plus en détail

IFT1148 Introduction

IFT1148 Introduction IFT1148 Introduction Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver 2011 1 / 17 HTML Le HTML (ou XHTML) est un langage de balisage permettant de décrire

Plus en détail

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet PARTIE I JavaScript: script côté client Programmation objet et événementielle en

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

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

Bases de données (INF225), TELECOM ParisTech. TP PHP & MySQL

Bases de données (INF225), TELECOM ParisTech. TP PHP & MySQL Bases de données (INF225), TELECOM ParisTech TP PHP & MySQL Pierre Senellart (pierre.senellart@telecom-paristech.fr) Bogdan Cautis (bogdan.cautis@telecom-paristech.fr) Ioana Ileana (ioana.ileana@telecom-paristech.fr)

Plus en détail

Telecommunication Services Engineering (TSE) Lab

Telecommunication Services Engineering (TSE) Lab Chapitre 3: La toile Roch Glitho, PhD Associate Professor and Canada Research Chair My URL - http://users.encs.concordia.ca/~glitho/ Application Couche Application Transport Réseau Liaison de données Support

Plus en détail