Publication (avancée) de données spatiales dans Internet

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

Download "Publication (avancée) de données spatiales dans Internet"

Transcription

1 Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 2 Frameworks Javascript, jquery & MapQuery Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard; Semaine 13

2 .Contenu du cours. Notion de framework de développement et introduction à jquery Introduction Utilisation & Exemples Syntaxes Plugins Le complément géospatial MapQuery jquery et cartographie MapQuery

3 Notion de framework de développement et introduction à jquery

4 Introduction jquery jquery est une librairie JavaScript légère à charger et facile à utiliser. jquery a été conçue pour changer la manière d écrire du code JavaScript en proposant de nouvelles méthodes au-dessus de JavaScript, masquant ainsi de nombreuses lignes de codes et facilitant la réutilisation de code. jquery simplifie l usage de codes compliqués en JavaScript, comme les appels AJAX et la manipulation DOM (Document Object Model). jquery facilite la définition et la gestion des événements HTML- JavaScript, ainsi que la production d effets et d animations.

5 Source : Introduction jquery n est pas la seule librairie facilitant l usage de JavaScript

6 Introduction Source :

7 Introduction Avantages Cross-browser (Internet Explorer 6.0+, Firefox 10+, Safari 5.0+, Opera, Chrome) Support de CSS 3 Léger 32 KB pour la version de production 252 KB pour la version de développement Beaucoup de documentations sous différentes formes : Tutoriaux en ligne API & exemples Forum, communauté active,

8 Introduction Exemple 1 - WordPress Exemples de sites web utilisant jquery

9 Introduction Exemple 2 - Amazon

10 Introduction Exemple 3 - Dell

11 Introduction Exemple 4 - ESPN

12 Utilisation Importation de jquery dans une page HTML À partir du site web de jquery <script type="text/javascript" src="http://code.jquery.com/jquery min.js"></script> À partir de nos propres répertoires avec le téléchargement de la librairie <script type="text/javascript" src="jquery.js"></script> À partir d hébergement CDN Google ou Microsoft <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

13 Premier exemple Pour débuter un premier exemple très simple Exécuter une boîte de dialogue de type alerte au démarrage d une page. Pour remplacer: window.onload = function(){alert("welcome");} Source:

14 Source: Deuxième exemple Autre exemple très simple Masquer des textes inclus dans des paragraphes (<P>)

15 Principe et syntaxe de base 1. Sélection : Identifier plusieurs éléments dans un document HTML 2. Action : Faire quelque chose avec ces éléments trouvés. Source: ejohn.org

16 Syntaxe Sélections (1/2) Pour accéder à des éléments HTML via JavaScript, jquery propose d utiliser une seule et unique fonction JavaScript : $() (ou jquery()) Il est alors possible d utiliser différents types de paramètres pour $() : Par ID : $("#monid") Par type : $("p") Correspondant à la balise <p> Par CSS : $(".test")

17 Source: Syntaxe Sélections (2/2) Plusieurs petits exemples sur le site

18 Syntaxe Actions possibles Manipulation DOM Gestion des événements Effets et Animations Callback et chainage AJAX

19 Syntaxe Rappel DOM DOM (Document Object Model) Norme W3C (World Wide Web Consortium). Norme pour accéder aux contenus des documents HTML et XML Interface indépendante des langages de programmation et des plateformes (IE, Firefox, Chrome, Safari, ) Source :

20 Syntaxe Manipulation DOM Obtenir Obtenir du contenu : text(), html(), val(), attr() Source:

21 Syntaxe Manipulation DOM Modifier Modifier du contenu : text(), html(), val(), attr() Source:

22 Syntaxe Manipulation DOM Ajout et suppression Ajout d éléments : append(), prepend(), after(), before() Suppression d éléments : remove(), empty() Source:

23 Syntaxe Manipulation DOM Classes CSS Ajout et suppression de classes CSS : addclass(), removeclass(), toggleclass(), css() Source:

24 Syntaxe Manipulation DOM Dimensions Obtention d informations sur les dimensions d éléments width(), height(), innerwidth(), innerheight(), outerwidth(), outerheight() Source:

25 Syntaxe Événements (1/2) Gestion des événements sous DOM Les méthodes associées aux événements en DOM sont généralement disponibles en jquery Par exemple, masquer le paragraphe si on clique dessus : Sélection de <p> Usage de l événement clic $("p").click(function(){ $(this).hide(); }); Définition d une action via une déclaration de fonction JavaScript

26 Syntaxe Événements (2/2) On trouve aussi : $(document).ready() : utilisé pour s assurer que le document est totalement chargé dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup() hover(), focus(), blur() Exemple $("#p1").hover(function(){ alert("you entered p1!"); }, function(){ alert("bye! You now leave p1!"); }); Source:

27 Syntaxe Effets et Animations On trouve aussi des méthodes liées à des effets ou animations : hide(), show(), toggle() fadein(), fadeout(), fadetoggle(), fadeto() slidedown(), slideup(), slidetoggle() animate() stop()

28 Syntaxe CallBack et Chainage Callback : Une fois qu une action est terminée, une autre (callback vers une autre fonction ou déclaration de la fonction en lieu et place du callback) s enchaine automatiquement ou après un certain délai. $(selector).hide(speed,callback); Chainage: Les actions s enchaînent les unes après les autres, car on reste sur l objet sélectionné au départ $("#p1").css("color","red").slideup(2000).slidedown(2000); Source:

29 Syntaxe AJAX Source :

30 Syntaxe AJAX Méthodes Source:

31 Plugins Source :

32 Plugins jquery UI (1/2) Source :

33 Plugins jquery UI (2/2) Source :

34 Plugins Exemple 1 Source :

35 Plugins Exemple 2 Source :

36 Plugins Exemple 3 Source :

37 Plugins Exemple 4 Source :

38 Ressources Liens web

39 Conclusion partie jquery On a vu dans cette première partie : La notion de framework de développement Ce qu est jquery Comment utiliser jquery Comment effectuer des sélections avec jquery Comment produire des actions comme la manipulation DOM, des effets, des animations de l AJAX Introduction aux plugins jquery, dont jquery UI

40 Le complément géospatial MapQuery

41 jquery et cartographie Il existe plusieurs solutions pour mixer la librairie jquery avec des données géospatiales, et ainsi faciliter la création d applications géospatiales en ligne riches, interactives et robustes. Exemples de solutions : Plugins pour google maps OpenLayers sur mobile OpenLayers + jquery UI Dialog Plugin en SVG : JQVMAP Plugin geospatial : jquerygeo

42 jquery et cartographie Exemple 1 Plugin jquery pour google maps : CodeCanyon Travel Map Pro Source :

43 jquery et cartographie Exemple 2 Plugin jquery pour google maps : CodeCanyon POI AutoMap Source :

44 jquery et cartographie Exemple 3 Plugin jquery pour google maps : Gmap3 Source :

45 jquery et cartographie Exemple 4 Openlayers sur mobile Source :

46 jquery et cartographie Exemple 5 OpenLayers + jquery UI Dialog var dialog; buildings.events.on({ featureselected: function(event) { var feature = event.feature; var area = feature.geometry.getarea(); var id = feature.attributes.key; var output = "Building: " + id + " Area: " + area.tofixed(2); dialog = $("<div title='feature Info'>" + output + "</div>").dialog(); }, featureunselected: function() { dialog.dialog("destroy").remove(); } }); Source :

47 jquery et cartographie Exemple 6 Plugin SVG : JQVMAP (jquery Vector Maps) Source :

48 jquery et cartographie Exemple 7 jvectormap Source :

49 Source : jquery et cartographie Exemple 8 Plugin geospatial : jquerygeo

50 MapQuery Introduction (1/2) MapQuery Plugin jquery Permet d ajouter des cartes dans les pages web OpenLayers + jquery + jqueryui Solution comparable à GeoExt (OpenLayers + ExtJS) Propose des fonctionnalités d outil cartographique zoom, gestion de couches, Version 0.1

51 MapQuery Introduction (2/2)

52 MapQuery Exemple $(document).ready(function() { var map = $('#map').mapquery({layers:[{type:'osm'}]}); //initialise mapquery with an OSM layer $('.zoom').mqzoombuttons({map:$('#map')}); map.data('mapquery').center({zoom:1,position:[0, 20]}); }); Chargement des données OpenStreetMap (OSM) Outils de zoom Carte centrée sur la position 0,20 Source :

53 MapQuery Syntaxe Chargement Chargement d une couche de données : OU Source :

54 MapQuery Syntaxe Couches de données Les couches de données disponibles Bing, Google, Vecteur, Json, OpenStreetMap (OSM), Web Map Service (WMS) Web Map Tile Service (WMTS). Source :

55 MapQuery Syntaxe Widgets (1/4) Widget gestionnaire de couches : mqlayermanager Source :

56 MapQuery Syntaxe Widgets (2/4) Widget gestionnaire de couches : mqlayermanager Source :

57 MapQuery Syntaxe Widgets (3/4) Widget mini-carte : mqoverviewmap Source :

58 Source : MapQuery Syntaxe Widgets (4/4) Widget barre de zoom : mqzoomslider

59 MapQuery Conclusion Dans cette deuxième partie, Différentes solutions existantes pour afficher des cartes sur le web en utilisant la librairie jquery ont été présentées. Ces solutions sont principalement des plugins jquery qui exploitent des bibliothèques cartographiques ou langages bien connus comme Google Maps, OpenLayers ou encore SVG Ensuite, une présentation de MapQuery a été effectuée. Des exemples ont été fournis en lien avec des widgets offerts par MapQuery. Attention, MapQuery n a que peu évolué ces derniers mois

60 Conclusion/Synthèse On a vu dans cette capsule : La notion de cadre (framework) de développement web La librairie jquery et ses différentes composantes Des exemples de solutions cartographiques intégrant jquery La solution MapQuery et quelques exemples d usage de Widgets mis à disposition par ce complément géospatial

Programmation Web Javascript et JQuery

Programmation Web Javascript et JQuery Programmation Web Javascript et JQuery Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 26 Présentation Générale Langage Javascript : Langage

Plus en détail

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Formation jquery Objectif(s): Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Durée : 2 jour(s) Pré-requis : Avoir suivi

Plus en détail

JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36

JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36 JQuery 1/36 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 3/36 Définition

Plus en détail

Programmation Web Avancée JQuery

Programmation Web Avancée JQuery 1/27 Programmation Web Avancée JQuery Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

jquery 3 Créer des sites web dynamiques et interactifs

jquery 3 Créer des sites web dynamiques et interactifs Chapitre 1 : Introduction A. Introduction 9 B. À propos de cet ouvrage 9 Chapitre 2 : Installer et utiliser jquery A. Les objectifs 13 B. Télécharger les fichiers jquery 13 1. Les différentes versions

Plus en détail

FORMATION À JQUERY. Thomas Morin Mai 2012

FORMATION À JQUERY. Thomas Morin Mai 2012 FORMATION À JQUERY Mai 2012 Introduction La bibliothèque JavaScript libre jquery Utilise JavaScript de façon facultative et non-intrusive Dans le header, on appelle la librairie jquery, des fonctions personnalisées,

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

Programmation web & mobile d applications géomatiques

Programmation web & mobile d applications géomatiques Programmation web & mobile d applications géomatiques SCG-67216 Technologies pour réaliser des applications géospatiales communicantes Architectures Web, J2EE et Servlets Thierry Badard & Frédéric Hubert

Plus en détail

Qu'est-ce que JQuery?

Qu'est-ce que JQuery? Qu'est-ce que JQuery? JQuery est une bibliothèque de fonctions en JavaScript. C'est une librairie légère : "écrire moins, faire plus" Cette bibliothèque contient les fonctionnalités suivantes: Sélection

Plus en détail

DOCUMENT TECHNIQUE. Sujet : Réalisation d une plate-forme Web de type «Jeu» d exploitation du portail Sud

DOCUMENT TECHNIQUE. Sujet : Réalisation d une plate-forme Web de type «Jeu» d exploitation du portail Sud DOCUMENT TECHNIQUE Sujet : Réalisation d une plate-forme Web de type «Jeu» d exploitation du portail Sud Langage de programmation 1. HTML5/CSS3 Pour réaliser ce projet, nous avons eu le choix entre 2 langages

Plus en détail

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Objectif(s): Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Maîtriser HTML5/CSS3 Mettre en œuvre les techniques de conception de sites web adaptatifs

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Format XML Jean-Michel FOLLIN jmfollin@univ-lr.fr Limitations HTML Limitations

Plus en détail

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

Plus en détail

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation!

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Formation foundation 5 Objectif(s): Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Durée : 1 jour(s) Pré-requis : Bonnes connaissances en (X)HTML et CSS

Plus en détail

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011 AJAX Magali Contensin 3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR Plan Comment actualiser une partie d'une page web? Principe Quelques applications Etapes Sécurité Support par les navigateurs

Plus en détail

A la découverte de Zend Studio 8.0

A la découverte de Zend Studio 8.0 A la découverte de Zend Studio 8.0 Xavier Gorse ELAO http://twitter.com/xgorse A partir du support de Roy Ganor, Chef de projet Zend Studio http://twitter.com/royganor Téléchargement Exécutables d installation

Plus en détail

AJAX / 2.0 : : : : : JQUERY

AJAX / 2.0 : : : : : JQUERY 1 Introduction / Web 2.0 Comprendre le principe Coder en javascript JQuery : Les bases JQuery : Les événements JQuery : Les effets JQuery : Les échanges (Ajax) Utiliser les plug-ins Aller plus loin avec

Plus en détail

Paris Web Ateliers Les bibliothèques JS jquery

Paris Web Ateliers Les bibliothèques JS jquery Paris Web 2007 - Ateliers Les bibliothèques JS jquery Orange Labs Julien Wajsberg, Recherche & Développement 17/11/2007, présentation à Paris Web 2007

Plus en détail

Ajax. Asynchronous Javascript and XML. lt La Salle Avignon BTS IRIS

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv> Ajax Asynchronous Javascript and XML Le terme Ajax a été introduit par Jesse James Garrett (informaticien américain), le 18 février 2005, dans un article sur le site Web Adaptive Path (http://www.scriptol.fr/ajax/ajax-garrett.php)

Plus en détail

TD n 3. Exercice 2: Écrire un script qui permet d obtenir l affichage suivant en utilisant qu une seule instruction document.

TD n 3. Exercice 2: Écrire un script qui permet d obtenir l affichage suivant en utilisant qu une seule instruction document. IUT de Bobigny 2008-2009 CIWM [SLATCM5231] TD n 3 Conception de Pages Web orientée Client 1 Introduction à javascript L objectif des exercices de cette partie est tester vos connaissances de base sur le

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

1.1. Objectifs du livre

1.1. Objectifs du livre Présentation Obectifs du livre... 10 Feuilles de style... 11 Historique... 13 Rôle du W3C... 14 Support des applications... 15 Choisir ses outils... 16 Conventions... 19 Chapitre 1 Présentation Ce chapitre

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Applets JAVA Jean-Michel FOLLIN jmfollin@univ-lr.fr 1 Extension des fonctionnalités

Plus en détail

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition)

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition) Présentation générale d'ajax 1. Principe et définition 11 2. Exemples sur le Web 16 2.1 Google Maps 16 2.2 Google Suggest 18 2.3 Google Agenda 19 2.4 Google Docs, Google Sheets et Google Slides 20 3. Avantages

Plus en détail

M2202 Algorithmique TD 5 : Une bannière animée interactive

M2202 Algorithmique TD 5 : Une bannière animée interactive M2202 Algorithmique TD 5 : Une bannière animée interactive Nous verrons dans ce TD comment : enchainer une suite d'images en fondu dans une bannière ; afficher une image spécifique de cette bannière par

Plus en détail

Guide d utilisation pour utilisateur «userpsa»

Guide d utilisation pour utilisateur «userpsa» Guide d utilisation pour utilisateur «userpsa» Site Internet du comité d entreprise http://cepcacharleville.fr Page 1 sur 13 SOMMAIRE 1 VERSION DU DOCUMENT... 3 2 COMMENT BIEN UTILISER CE GUIDE... 4 3

Plus en détail

CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML

CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 1. AVERTISSEMENT L objectif de ce support de cours n est pas de faire un catalogue exhaustif de toutes les fonctionnalités ou de toutes les balises

Plus en détail

Université de Toulouse-2 Jean Jaurès décembre 2015 Département de Géographie-Aménagement-Environnement Laurent Jégou

Université de Toulouse-2 Jean Jaurès décembre 2015 Département de Géographie-Aménagement-Environnement Laurent Jégou Université de Toulouse-2 Jean Jaurès décembre 2015 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U351_33 Le client léger : APIs et bibliothèques de fonctions JavaScript

Plus en détail

JQUERY. LI288 web et développement web

JQUERY. LI288 web et développement web JQUERY LI288 web et développement web jquery Librairie Javascript qui permet de : Simplifier les taches de base en Javascript. Accéder à des partie d'une page HTML : Utilisation d'expressions CSS ou "Xpath"

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Rapport du projet HTML 5/CSS

Rapport du projet HTML 5/CSS Rapport du projet HTML 5/CSS But du Projet : L objectif du projet était de réaliser un site web en utilisant HTML 5 et en y incluant des pages utilisant le framework Bootstrap. Le contenu du projet doit

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

Chapitre 2: Présentation de Flex. Développer une application avec Adobe Flex 2.0

Chapitre 2: Présentation de Flex. Développer une application avec Adobe Flex 2.0 Chapitre 2: Présentation de Flex Développer une application avec Adobe Flex 2.0 Thèmes Comprendre l émergence des applications dynamiques pour Internet Présentation de Flex Développer des applications

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 III Les événements Programmation objet et événementielle en JavaScript - SRC

Plus en détail

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA AJAX Sommaire Introduction Applications Web Applications AJAX Avantages / Inconvénients Exemple Introduction AJAX, ou Asynchronous JavaScript And XML («XML et Javascript asynchrones»), est un acronyme

Plus en détail

Programme Formation Webmaster Opérationnel niveau 2

Programme Formation Webmaster Opérationnel niveau 2 Programme Formation Webmaster Opérationnel niveau 2 Objectif : Savoir personnaliser et dynamiser le contenu de sites web par la connaissance de l'html5/css3, du PHP MySQL, du JavaScript et d'ajax. Compétences

Plus en détail

Développeur intégrateur Web Ecole Webforce3

Développeur intégrateur Web Ecole Webforce3 Impression à partir du site https://offredeformation.npdcp.fr le 05/03/2017. Fiche formation Développeur intégrateur Web Ecole Webforce3 - N : 28860 - Mise à jour : 02/02/2017 Développeur intégrateur Web

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

JavaScript. Chapitre 5 : encore plus loin. MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.

JavaScript. Chapitre 5 : encore plus loin. MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes. JavaScript Chapitre 5 : encore plus loin MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.so 2016 JavaScript 6 chapitres Description du cours Fondamentaux Instructions

Plus en détail

D Surfer sur l Internet

D Surfer sur l Internet D Surfer sur l Internet 1. Les navigateurs Internet Prêt à surfer sur le net? Avant ça il vous faudra un logiciel qui vous permettra d'afficher des sites Internet, faire des recherches, voir des vidéos

Plus en détail

Conception: UX / UI Design: Dév. Web: Dév. Android: PS / AI:

Conception: UX / UI Design: Dév. Web: Dév. Android: PS / AI: Ingénieur en Informatique et multimédia & développeur mobile à la recherche d une opportunité UX Design. Prototypage, Maquettage, Sketching, Interaction Design et d utilisabilité de 2 applications mobiles

Plus en détail

Développement d application web avec Visual Studio 2012 et ASP.NET. Tutoriel 5.1 : Validation

Développement d application web avec Visual Studio 2012 et ASP.NET. Tutoriel 5.1 : Validation L objectif de ce tutoriel est d utiliser les contrôles de validation afin de valider l inscription d un développeur à un site. Les informations suivantes doivent être validées : le nom et le prénom sont

Plus en détail

ITII Programmation Web FMC Page 1

ITII Programmation Web FMC Page 1 Programmation Web FMC Page 1 Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications

Plus en détail

Bootstrap - Developper un site web avec Bootstrap

Bootstrap - Developper un site web avec Bootstrap 2 Jours Bootstrap - Developper un site web avec Bootstrap dans CREATION WEB - SITE INTERNET Objectifs de la formation Bootstrap Comprendre les fondamentaux du responsive Design S'approprier le framework

Plus en détail

MODE D EMPLOI FLUX RSS

MODE D EMPLOI FLUX RSS MODE D EMPLOI FLUX RSS 1 SOMMAIRE INTRODUCTION AUX FLUX RSS... 3 SUIVRE LES ACTUALITES DU SITE DU LYCEE F. FAURE BEAUVAIS... 4 Avec Internet Explorer 9... 4 Avec Mozilla Firefox 10... 6 Avec Google Chrome

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

Introduction http:// www.mediaforma.com/formation-html5-et-css3

Introduction http:// www.mediaforma.com/formation-html5-et-css3 Introduction Ce livre est un concentré de code HTML5 et CSS3 prêt à l emploi 1. Il se divise en seize chapitres thématiques. Vous êtes un dévelop peur de niveau intermédiaire ou avancé? Vous y trouverez

Plus en détail

Première partie : présentation du projet

Première partie : présentation du projet Benjamin BARTETE Vincent DALIS Cédric LALANNE Romain MAILHARRAINCIN Tuteurs : Thierry NODENOT The Nhan LUONG Projet N 03 PIND (Photo INteraction Design) : Conception d'une galerie de photos interactive

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

Introduction http://www.mediaforma.com/

Introduction http://www.mediaforma.com/ Ce livre est un concentré de code HTML5 et CSS3 prêt à l emploi 1. Il se divise en seize chapitres thématiques. Vous êtes un développeur de niveau intermédiaire ou avancé? Vous y trouverez de nombreux

Plus en détail

Web2 Web Dynamique et Multimédia Vers les RIA

Web2 Web Dynamique et Multimédia Vers les RIA Web2 Web Dynamique et Multimédia Vers les RIA Thomas Bourdeaud'huy, Diego Cattaruzza, Arnaud Charlier, Laurent Wrowblewski thomas.bourdeaud_huy@ec-lille.fr Ecole Centrale de Lille / IG2I Plan Organisation

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

Programmeur Niveau 2 PHP5

Programmeur Niveau 2 PHP5 Programmeur Niveau 2 PHP5 L objectif de la 3W Academy est de former des petits groupes d élèves à la programmation de sites internet ainsi qu à la création d applications web complexes tel qu un blog ou

Plus en détail

Les navigateurs Internet

Les navigateurs Internet Les navigateurs Internet Lancer Internet en utilisant votre navigateur préféré. Internet Explorer, Mozilla Firefox ou Google Chrome On peut avoir plusieurs navigateurs installés sur un même ordinateur

Plus en détail

TECHNIQUE DE CONSTRUCTION D UN MODULE

TECHNIQUE DE CONSTRUCTION D UN MODULE TECHNIQUE DE CONSTRUCTION D UN MODULE Pilotage Infographie Description générale Romuald LORTHIOIR Stéphane RIO Aurélie PASSILLY Date de création du document 20 nov. 2006 Version 1.1 Validation pour le

Plus en détail

Bibliothèques graphiques

Bibliothèques graphiques Bibliothèques graphiques Cilia Mauro Octobre 2012 ANF DevWeb ASR Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts Introduction Modèles colorimétriques 1 pixel

Plus en détail

Les nouveaux horizons de la cartographie sur le web. Benjamin Becquet Paris Web 2012

Les nouveaux horizons de la cartographie sur le web. Benjamin Becquet Paris Web 2012 Les nouveaux horizons de la cartographie sur le web Benjamin Becquet Paris Web 2012 Un peu d'histoire (-géo) : il y a 10 ans Géomatique Acteurs historiques Fort écosystème libre, mais données fermées Standards

Plus en détail

Historique des modifications Version Date de la version Commentaires

Historique des modifications Version Date de la version Commentaires WIDGET Historique des modifications Version Date de la version Commentaires V-3.1 Juillet 2015 Mise à jour Sommaire Introduction... 4 Utilisation... 5 Paramètres... 6 Introduction Le widget est un outil

Plus en détail

Dreamweaver CS6 pour PC/Mac

Dreamweaver CS6 pour PC/Mac ENVIRONNEMENT. Généralités 1 A- La page de démarrage 1 B- L écran principal 2 C- La barre d état 3 D- Utiliser les règles 4 E- Utiliser la grille 4 F- Utiliser les repères 5 G- Modifier le zoom 6 1.2 Les

Plus en détail

Développer avec jquery Mobile Première Édition. Table des matières

Développer avec jquery Mobile Première Édition. Table des matières Table des matières 1.Introduction au Framework...5 1.1. jquery au cœur de l'internet Mobile...5 1.2. Découvrir Le Framework...6 1.2.1 Installation de jquery Mobile...6 1.2.2 Une première application...7

Plus en détail

Master Class OL3 Documentation

Master Class OL3 Documentation Master Class OL3 Documentation Version 2.0 Éric Lemoine, Camptocamp 10 April 2014 Table des matières 1 Exercices élémentaires 3 1.1 Exercice élémentaire 1.......................................... 4 1.2

Plus en détail

Installer TimeSens pour Panel Leader

Installer TimeSens pour Panel Leader Installer TimeSens pour Panel Leader Ce tutoriel détaille les prérequis matériel et logiciel ainsi que la procédure d installation et de mise à jour de TimeSens pour Panel Leader Conditions requises pour

Plus en détail

01/11/15. Rapport ProjetWeb. Salah Dkhissi Sahar JOUNDI INFO2. 1 P a g e

01/11/15. Rapport ProjetWeb. Salah Dkhissi Sahar JOUNDI INFO2. 1 P a g e 01/11/15 Rapport ProjetWeb Salah Dkhissi Sahar JOUNDI INFO2 1 P a g e Sommaire Introduction...3 1. Manuel d installation...4 2. Phase de conception...5 1. Cas d utilisations...5 2. Modèle entité-association...6

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 3 - Architectures pour le développement d applications sur web Thierry Badard & Frédéric Hubert Université Laval, Dép.

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

Gestion du site web www.college-st-paul.qc.ca. Manuel d instructions

Gestion du site web www.college-st-paul.qc.ca. Manuel d instructions Gestion du site web www.college-st-paul.qc.ca Table des matières Accéder au panneau d administration...3 Ajouter un administrateur...5 Structure du site...6 Ajouter une page...8 Éditer une page nouvellement

Plus en détail

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015 Programmation Web IMAC 2015-2016 TD 7 : AJAX et JSON 18 novembre 2015 Objectif: Ce TD a pour but de decouvrire les syntaxes AJAX et JSON, ainsi que leur liens avec jquery. 1 AJAX AJAX (acronyme de Asynchronous

Plus en détail

Javascript : les bases du langage

Javascript : les bases du langage Javascript : les bases du langage Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Université Lille 1 - Licence 1 SESI Technologies du Web 1 1 Javascript présentation partielle,

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

Faire du web moderne à destination de tous. Julien Wajsberg Paris-Web octobre 2012

Faire du web moderne à destination de tous. Julien Wajsberg Paris-Web octobre 2012 Faire du web moderne à destination de tous Julien Wajsberg Paris-Web octobre 2012 différents devices résolution et densité PC et écrans, tablettes, mobiles entrées utilisateurs clavier souris écrans touch

Plus en détail

P.BOUQUET maj. du 21/02/2016. Vocabulaire Web

P.BOUQUET maj. du 21/02/2016. Vocabulaire Web Agile : Méthode de gestion de projet basée sur l'humain, le fonctionnel, l'itératif et l'adaptabilité. BDD : Bases De Données structurées. CMS : Logiciel hautement paramétrable, facilitant la création

Plus en détail

Introduction à jquery en 5 minutes

Introduction à jquery en 5 minutes Introduction à jquery en 5 minutes http://jquery.com 1 Introduction à jquery en 5/10 / minutes $( #mynode ).find( li :visible ).not( :gt(4) ).find( a[href$=pdf] ).filter( :contains(ouch) ).each(function

Plus en détail

Découverte de la plateforme. Gleamcode, un jeu pour apprendre à coder et créer du pixel art!

Découverte de la plateforme. Gleamcode, un jeu pour apprendre à coder et créer du pixel art! Thématique : Découverte de la plateforme Niveaux : Cycles 2, 3 et Collège Mission : Les bases : Allumer Âge : 7 ans et plus GUIDE ANIMATEUR MODE D EMPLOI Gleamcode, un jeu pour apprendre à coder et créer

Plus en détail

Espace Numérique Régional de Santé Formation Agora Project

Espace Numérique Régional de Santé Formation Agora Project Espace Numérique Régional de Santé Formation Agora Project Sommaire 1. Introduction 2. Se connecter 3. Présentation Générale 4. Utilisateur de l espace 5. Gestionnaire de fichier 6. Agenda 7. Actualités

Plus en détail

Retour sur le développement d'un outil de composition musicale à l aide de GWT. Steven Varoumas

Retour sur le développement d'un outil de composition musicale à l aide de GWT. Steven Varoumas Retour sur le développement d'un outil de composition musicale à l aide de GWT Steven Varoumas Objectif Créer un outil d édition musicale accessible sur internet (pour l éducation, projets ultérieurs,

Plus en détail

WPS BASSIN VERSANT. Un outil de modélisation hydrologique intégré à l'infrastructure de Données Spatiales georchestra. Hervé Squividant UMR SAS

WPS BASSIN VERSANT. Un outil de modélisation hydrologique intégré à l'infrastructure de Données Spatiales georchestra. Hervé Squividant UMR SAS WPS BASSIN VERSANT Un outil de modélisation hydrologique intégré à l'infrastructure de Données Spatiales georchestra Hervé Squividant UMR SAS Principe MNTSurf WPS georchestra Addon Réutilisation Conclusion

Plus en détail

Pour créer un tooltip, on utilise la balise , avec l attribut : data-toggle="tooltip".

Pour créer un tooltip, on utilise la balise <a>, avec l attribut : data-toggle=tooltip. Les info-bulles Tooltip - Principe Les tooltips sont les infobulles les plus basiques proposées par Bootstrap 3. Lorsque l utilisateur survole un élément HTML avec sa souris, une petite fenêtre noire contenant

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

ETUDE DU SYSTEME DE GEO-BUSINESS INTELLIGENCE OPENSOURCE GEOKETTLE

ETUDE DU SYSTEME DE GEO-BUSINESS INTELLIGENCE OPENSOURCE GEOKETTLE G MASTER II : Informatique appliquée aux Systèmes d information Géographiques ETUDE DU SYSTEME DE GEO-BUSINESS INTELLIGENCE OPENSOURCE GEOKETTLE Projet personnel Géomatique Par: Oukoum Nadjombe Gbatti

Plus en détail

UPMC/Licence/Info/2I013 Pentodroid XML

UPMC/Licence/Info/2I013 Pentodroid XML UPMC/Licence/Info/2I013 Pentodroid XML Janvier 2017 1 Structure XML Extensible Markup Language héritier de SGML (Standard Generalize Markup Language) est un language formel de description de documents

Plus en détail

VERSION 6 GRAND PUBLIC GUIDE D UTILISATION

VERSION 6 GRAND PUBLIC GUIDE D UTILISATION VERSION 6 GRAND PUBLIC GUIDE D UTILISATION JANVIER 2015 Table des matières Table des matières... 2 1. Introduction... 3 2. Lancement de GOnet... 3 3. Fonctionnement... 3 3.1. Parties de l interface...

Plus en détail

NEWTEST MAG NEWTRIA/DOM CONTACT :

NEWTEST MAG NEWTRIA/DOM CONTACT : NEWTEST MAG NEWTRIA/DOM Reproduction ou communication même partielle interdite sans autorisation écrite d ip-label. CONTACT : ip-label Tél : 01 77 49 53 00 Fax : 01 49 64 03 80 90 boulevard National, 92250

Plus en détail

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Au delà du HTML création dynamique de Javascript, d images et de fichiers PDF Introduction PHP ne permet pas seulement de générer du code HTML. On peut, entre

Plus en détail

3I017 - Technologies Web

3I017 - Technologies Web 1 / 23 3I017 - Technologies Web Ludovic Denoyer (Cours+Responsable) ludovic.denoyer@lip6.fr Laure Soulier (Cours+TD/TP) Sylvain Lamprier (TD/TP) Quentin Bramas (TD/TP) Aurélia Léon (TD/TP) Université Pierre

Plus en détail

Table des matières 1. Editions ENI - Toute reproduction interdite

Table des matières 1. Editions ENI - Toute reproduction interdite Table des matières 1 Introduction L'Internet aujourd'hui...7 Le World Wide Web Consortium et les standards...7 Les logiciels de conception de sites web...7 L'objectif du livre...8 Interface de conception

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

Guide pour l utilisation de Sextant version 6

Guide pour l utilisation de Sextant version 6 Guide pour l utilisation de Sextant version 6 Contexte En 1999, pour répondre à ses besoins propres, l'ifremer a développé l'infrastructure de données géographiques marines et littorales, Sextant (http://sextant.ifremer.fr).

Plus en détail

1 XML : Une première définition. 2.1 SGML... 1 2.2 HTML... 2 2.3 Feuille de style CSS... 3. 3 XML : extensible Markup Language 4

1 XML : Une première définition. 2.1 SGML... 1 2.2 HTML... 2 2.3 Feuille de style CSS... 3. 3 XML : extensible Markup Language 4 Introduction au Table des matières 1 : Une première définition 1 2 Historique d 1 2.1 SGML................................................. 1 2.2 HTML................................................. 2

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-20859 & SCG-66408 HTML & CSS Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard;

Plus en détail

PROJET EOLIEN HTTP. Projet éolien HTTP. 18/12/2015 Etudiant 1 : Données énergies

PROJET EOLIEN HTTP. Projet éolien HTTP. 18/12/2015 Etudiant 1 : Données énergies PROJET EOLIEN HTTP 18/12/2015 Etudiant 1 : Données énergies Etudiant 1 : Blondé Lukas 1TSSNIR Etudiant 2 : Kins Maxime 1TSSNIR Etudiant 3 : Broutin Pierre 1TSSNIR Projet éolien HTTP E T U D I A N T 1 :

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

INTERNET : POUR LA PETITE HISTOIRE

INTERNET : POUR LA PETITE HISTOIRE 1 SOMMAIRE 1. Internet : pour la petite histoire 2. Comment accéder à Internet 3. Le navigateur 4. La barre d adresse et l URL 5. Les liens hypertextes 6. Le moteur de recherche 7. Imprimer une page web

Plus en détail

EXAM JAVASCRIPT 6 FRAMEWORKS

EXAM JAVASCRIPT 6 FRAMEWORKS EXAM JAVASCRIPT 6 FRAMEWORKS MAUER Florent JQuery JQuery est une bibliothèque JavaScript permettant de faciliter l'écriture de scripts dans le code HTML. Sa devise est "jquery. Write Less, Do More" Pourquoi?

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 2 - Notions d'interface Cartographique pour le Web (2/2) Thierry Badard & Frédéric Hubert Université Laval, Dép. des

Plus en détail

Les standards du web

Les standards du web COURS - Partie 1 Le HTML5 et le CSS3, petits frères du HTML (ou XHTML) et du CSS viennent, alors que l ère actuelle est à l interconnexion et aux média multiples. Dans le but de satisfaire la demande grandissante

Plus en détail

Guide d utilisation. Outil BigBlueButton LA CONFÉRENCE EN LIGNE

Guide d utilisation. Outil BigBlueButton LA CONFÉRENCE EN LIGNE Guide d utilisation Outil BigBlueButton LA CONFÉRENCE EN LIGNE Table des matières Présentation 3 Les rôles et le statut de présentateur 3 Prérequis - Conseils d utilisation 4 Mise en oeuvre dans l ENT

Plus en détail

Fil RSS Une nouveauté au Conseil

Fil RSS Une nouveauté au Conseil Fil RSS Une nouveauté au Conseil www.montrealmetro.ftq.qc.ca Fil RSS des nouvelles du Conseil régional FTQ Montréal métropolitain Le Conseil régional FTQ Montréal métropolitain offre dorénavant à ses internautes

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

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012 AJAX Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-le-Rouet Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages Présentation

Plus en détail