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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : jquery 1/24 Technologies Web jquery Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : jquery 2/24 Plan 1 Introduction 2 Fonctionnalités

Plus en détail

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

jquery, "write less, do more"

jquery, write less, do more jquery, "write less, do more" jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. jquery

Plus en détail

1-Présentation Jquery

1-Présentation Jquery JQUERY 1-Présentation Jquery Bibliothèque Javascript Navigateurs supportés: Chrome,Firefox: >= version courante 1 Safari: 5.1+ Opera: 12.1x ou >= v courante -1 ios: 6.1+ Android: 2.3, 4.0+ IE: Jquery 1.x

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

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

Module M2105 Programmation jquery. IUT de Béziers, dépt. R&T

Module M2105 Programmation jquery. IUT de Béziers, dépt. R&T Module M2105 Programmation jquery IUT de Béziers, dépt. R&T 2015-2017 http://www.borelly.net/ Christophe.BORELLY@iutbeziers.fr Généralités jquery est une bibliothèque JavaScript libre et multi-plateforme

Plus en détail

Exercices de Programmation Web, Laboratoires et TP

Exercices de Programmation Web, Laboratoires et TP Exercices de Programmation Web, Laboratoires et TP TABLEAU DES MATIÈRES 1. Introduction...1 2. Outils de développement...1 3. Programmation en JQuery...2 3.1. Utilisation Démarrer jquery...2 3.2. Gestion

Plus en détail

JQUERY : Développer en Javascript avec le framework JQUERY

JQUERY : Développer en Javascript avec le framework JQUERY JQUERY : Développer en Javascript avec le framework JQUERY Objectifs : Cette formation Jquery vous permet d'acquérir des connaissances et des compétences pour développer des sites Web interactifs et dynamiques

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

LES NOUVELLES APIS JAVASCRIPT

LES NOUVELLES APIS JAVASCRIPT LES NOUVELLES APIS JAVASCRIPT Aspects techniques Gilles Cébélieu IGN-SHOM PROGRAMME > Préambule > SDK > Extensions Géoportail > Extension Géoportail pour OL3 > Extension Géoportail pour Leaflet > Bibliothèque

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

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

Cours 3 Bibliotheque Javascript JQuery

Cours 3 Bibliotheque Javascript JQuery Cours 3 Bibliotheque Javascript JQuery Yacine Bouzidi Yacine.bouzidi@inria.fr Plan JQuery Inroduction Getter/setter JQuery et événements JQuery et Ajax JQuery : introduction JQuery : qu'est ce que c'est?

Plus en détail

UTILISER LA PROGRAMMATION OBJET, DÉVELOPPER DES SITES WEB INTERACTIFS PROFESSIONNELS, PERFORMANTS ET SÉCURISÉS

UTILISER LA PROGRAMMATION OBJET, DÉVELOPPER DES SITES WEB INTERACTIFS PROFESSIONNELS, PERFORMANTS ET SÉCURISÉS Référence : IJSO Durée : 4 jours (28h.) Tarif : 2090 HT Contact : 01 43 34 90 94 Niveau : Intermédiaire Cours à distance : Possible Eligible : CPF Certification : MCSD: Web Applications Prochaines sessions

Plus en détail

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique Avant-propos 1. Introduction 13 2. Niveau de compétences requis 14 3. Structure du livre 14 Premiers pas 1. Introduction 17 2. Les applications JEE 18 2.1 Les API JEE 19 2.2 Les ressources statiques 22

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

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

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

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

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

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

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

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

Développer des applications Web ASP.NET MVC 4 vb

Développer des applications Web ASP.NET MVC 4 vb Résumé : Cette formation fournit les compétences et connaissances nécessaires pour développer des applications ASP.NET MVC avec les technologies et les outils Framework 4.5. Lors de la formation un focus

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

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

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

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

Projet de groupe B2 Développement Web

Projet de groupe B2 Développement Web Projet de groupe B2 Table des matières 1. FICHE SIGNALETIQUE DU GROUPE DE PROJET... 3 1.1. MEMBRES DU GROUPE... 3 2. RAPPORT DE PROJET... 4 2.1. REPARTITION DES TACHES... 4 2.1.1. Travail réalisé par Gautier

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

Javascript - Manipulation du DOM

Javascript - Manipulation du DOM Javascript - Manipulation du DOM 1 Référence Vous trouverez sur le site http://html5index.org/ les détails de l API HTML5. Introduction Les fonctions ayant longtemps coexisté pour la sélection de nœuds

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

Programmation Web AJAX

Programmation Web AJAX /25 Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galilée - Université Paris 13 & LIMSI-CNRS hamon@limsi.fr http://perso.limsi.fr/hamon/teaching/progweb-20132014/ 2/25 Asynchronous Javascript

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

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition)

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition) Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Les objectifs du livre 13 E. Les outils de l intégrateur web 13 1. Les

Plus en détail

Apprendre à développer avec JavaScript (2e édition)

Apprendre à développer avec JavaScript (2e édition) Présentation du langage JavaScript 1. Définition et rapide historique 17 2. Prérequis pour un apprentissage aisé du langage 19 3. Outillage nécessaire 20 4. Positionnement du JavaScript face à d autres

Plus en détail

Cours de Programmation Web. Présentation du framework AngularJS. AngularJS. Présentation du framework AngularJS. Page 1. Yacine Rezgui Cédric Ferretti

Cours de Programmation Web. Présentation du framework AngularJS. AngularJS. Présentation du framework AngularJS. Page 1. Yacine Rezgui Cédric Ferretti AngularJS Page 1 Table des matières AngularJS, qu est-ce que c est?... 3 Gestion de la vue... 4 Syntaxe... 4 Two-way data binding... 4 Ng-*... 4 Les filtres... 5 La partie logique... 5 Les services...

Plus en détail

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Technologie de web partie pratique Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Plan HTML et CSS : Exercices basiques : 1 heure JavaScript : Interaction dynamique,

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

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

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

ARGOOMAP. URL :

ARGOOMAP. URL : ARGOOMAP Argoomap est une initiative de l Université de Toronto. Sur une carte en arrière plan, l utilisateur a la possibilité d ajouter des repères dans lesquels il place de l information. Le site fonctionne

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

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

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

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

Je vous invite à visiter mon portfolio pour avoir une meilleur compréhension de mes compétences et expériences à ce jour:

Je vous invite à visiter mon portfolio pour avoir une meilleur compréhension de mes compétences et expériences à ce jour: Jérémie Mora Développeur Web et mobile jeremie.mora@gmail.com Résumé Je vous invite à visiter mon portfolio pour avoir une meilleur compréhension de mes compétences et expériences à ce jour: http://jeremiemora.com/

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

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

10 - Extensions et plugins

10 - Extensions et plugins 10 - Extensions et plugins QGIS version 3.0 5 août 2014 Table des matières Introduction 5 I - Gestionnaire d'extensions 7 A. Extensions principales et complémentaires...7 B. Commande Extension/Installer/Gérer

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

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

Le Suivi-Evaluation de la mise en œuvre de l Initiative de la Grande Muraille Verte pour le Sahara et le Sahel

Le Suivi-Evaluation de la mise en œuvre de l Initiative de la Grande Muraille Verte pour le Sahara et le Sahel Première Conférence sur l Initiative de la Grande Muraille Verte pour le Sahara et le Sahel (IGMVSS) Le Suivi-Evaluation de la mise en œuvre de l Initiative de la Grande Muraille Verte pour le Sahara et

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

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

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

Documentation technique Back-office

Documentation technique Back-office MEEVY Documentation technique Back-office Juillet 2010 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

Plus en détail

LE GEOPORTAIL ET SES SERVICES

LE GEOPORTAIL ET SES SERVICES ign.fr LE GEOPORTAIL ET SES SERVICES PRÉSENTATION GÉNÉRALE DU GEOPORTAIL COMMENT UTILISER LE GEOPORTAIL? Niel Guion, consultant - IGN page 3 LE GÉOPORTAIL QU EST-CE QUE LE GÉOPORTAIL? UN PORTAIL DE CONSULTATION

Plus en détail

DOM. Michel Gagnon École Polytechnique de Montréal

DOM. Michel Gagnon École Polytechnique de Montréal DOM Michel Gagnon École Polytechnique de Montréal 1 Ce qui se passe lorsqu un document HTML est chargé 1. Déclenchement du processus de construction du DOM (Document Objet Model) 2. Quand une balise

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

É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

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

Plan. Introduction Concepts de base. Filtrage. 1 jquery. 2 Les sélecteurs. 3 Les événements. jquery Les sélecteurs Les événements

Plan. Introduction Concepts de base. Filtrage. 1 jquery. 2 Les sélecteurs. 3 Les événements. jquery Les sélecteurs Les événements Plan Introduction Concepts de base 1 Introduction Concepts de base 2 3 Principe Introduction Concepts de base est une bibliothèque JavaScript qui a pour but de soulager le développeur des tâches fastidieuses

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

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é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

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

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

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

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

Portail Web Vanilla. Portail Web Vanilla 5.2. Charles Martin et Patrick Beaucamp

Portail Web Vanilla. Portail Web Vanilla 5.2. Charles Martin et Patrick Beaucamp Portail Web Vanilla Portail Web Vanilla 5.2 Auteur : Contact: Charles Martin et Patrick Beaucamp info@bpm-conseil.com Date: 01/04/2016 Document: BPM_Vanilla_WebPortail_v5_2_FR.docx Vanilla Version 5.2

Plus en détail

Aide Centre de certification. https://confianceonline.com/centre_certification/

Aide Centre de certification. https://confianceonline.com/centre_certification/ Aide Centre de certification https://confianceonline.com/centre_certification/ 1 Sommaire Partie A : Le Client... 3 Présentation... 3 a) Accueil... 3 b) Trouver un certificat... 4 1. Trouver le certificat

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

1. Généralités. 2. Config

1. Généralités. 2. Config https://github.com/boiteasite/cmsuno 1. Généralités Pour accéder à l'administration du site, ajouter /uno.php au nom de domaine : Pour récupérer le mot de passe et/ou le login, il faut accéder au site

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

É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

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

Interaction Homme Machine. Web Sémantique

Interaction Homme Machine. Web Sémantique Interaction Homme Machine Web Sémantique Nassim TIGUENITINE 2014/2015 Sommaire Introduction Définition des générations web Historique du web sémantique Impact du web 2.0 sur les IHM Conclusion Introduction

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

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

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

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

Développement d'applications pour mobiles multiplateformes (ios, Android, Windows Phone...)

Développement d'applications pour mobiles multiplateformes (ios, Android, Windows Phone...) Référence : TDAM Durée : 5 jours (35h.) Tarif : 2490 HT Contact : 01 43 34 90 94 Niveau : Intermédiaire Cours à distance : Possible Eligible : CPF Prochaines sessions : - 12 juin au 16 juin - 03 juillet

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

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

Documentation technique

Documentation technique Information du projet Groupe : Nom du projet : Type de document : qarrou_h grunt_f ayachi_s boyer_m magnie_f doutre_n beauda_a Version : TD 3.0 Réfèrence : Statut du document : Documentation technique

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

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

App hybrides. Merci de vous installer par binôme de niveau différent

App hybrides. Merci de vous installer par binôme de niveau différent App hybrides Merci de vous installer par binôme de niveau différent Programme (1/2) Introduction: panorama du dev mobile Le web et le HTML Évaluation 1 (QCM) La mise en page avec CSS Les bases de Javascript

Plus en détail

M3206. multimedia web Flash? ;-)

M3206. multimedia web Flash? ;-) M3206 multimedia web Flash? ;-) FLASH AUJOURD HUI... pourquoi tant de haine? ;-) Les alternatives Où ne trouve t on plus de flash? Où trouve t on encore du flash? FLASH? où ne trouve t on plus de flash?

Plus en détail

Modèles et applications du Web Le web mobile. Hubert Segond Orange Labs ENSI

Modèles et applications du Web Le web mobile. Hubert Segond Orange Labs ENSI Modèles et applications du Web Le web mobile Hubert Segond Orange Labs ENSI 2017-18 Plan du cours Introduction Web mobile OS mobile Application native WebApp Développement applications mobiles Application

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

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

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

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

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