INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,
|
|
|
- Pauline Brousseau
- il y a 7 ans
- Total affichages :
Transcription
1 INSA - ASI TechnoWeb : jquery 1/24 Technologies Web jquery Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr
2 INSA - ASI TechnoWeb : jquery 2/24 Plan 1 Introduction 2 Fonctionnalités basiques 3 Interactivité
3 INSA - ASI TechnoWeb : jquery 3/24 Introduction (1/2) Généralités Description Framework (comme PrototypeJS, Mootools, Dojo, YahooUI,...) Créé en Janvier 2006 Très utilisé : >50% des sites dans le monde 2 versions : 1.X (1.11.3), 2.X (2.1.4) non compatible IE<9 Objectifs Régler les problèmes de compatibilité entre navigateurs Faciliter l écriture de scripts
4 INSA - ASI TechnoWeb : jquery 4/24 Introduction (2/2) Utilisation Utilisation d une version locale Téléchargement sur <script type="text/javascript" src="jquery.js"></script> Utilisation de version en cache Google CDN : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Microsoft CDN CDNJS CDN jsdelivr CDN
5 INSA - ASI TechnoWeb : jquery 5/24 Fonctionnalités basiques (1/13) Sélecteur d élément jquery( selecteur ) équivalent à \$( selecteur ) avec selecteur = sélecteur de type CSS, i.e. : \#unid,.uneclass, une balise HTML,... Référence : Rappels : attente de la fin du chargement du DOM Une page HTML est un arbre dans lequel les éléments (nœuds) sont séquentiels Une page HTML est traitée par un navigateur comme un flux $( document ). ready ( function () { alert ( Le DOM est prêt! ); });
6 INSA - ASI TechnoWeb : jquery 6/24 Fonctionnalités basiques (2/13) Exemple Exemple1.html <!DOCTYPE html > <html > <head > <title > Exemple jquery 1 </title > <meta http-equiv= " Content-Type " content= "text /html ; charset=utf-8 "> </head > <body > <head er> <h1 > Exemple jquery ( document ready )</h1> </head er> <footer > <script src= " https :// ajax. googleapis.com /ajax /libs / jquery /2.1.4/ jquery.min.js"> </script > <script > $( document ). ready ( function () { alert ( Le dom est prêt! ); }); </script > </ footer > </body > </html >
7 INSA - ASI TechnoWeb : jquery 7/24 Fonctionnalités basiques (3/13) Parcours du DOM Éléments fils : $( selecteur1 ).find( selecteur2 ); (équivalent à $( selecteur1 selecteur2 );) Éléments fils directs : $( selecteur1 ).children( selecteur2 ); Élément parent : $( selecteur1 ).parent( selecteur2 ); Élément suivant : $( selecteur1 ).next( selecteur2 ); Élément précédent : $( selecteur1 ).prev( selecteur2 ); Boucle sur une liste d éléments : $( selecteur ).each(function( index ) {... }); NB : selecteur2 peut être vide
8 INSA - ASI TechnoWeb : jquery 8/24 Fonctionnalités basiques (4/13) Exemple Exemple2.html <body > <head er> <h1 > Exemple jquery ( sélecteurs )</h1> </head er> <div id= " main "> <div > Div 1 </div > <ul > <li >Li 1</li> <li >Li 2</li> <li >Li 3</li> <li >Li 4</li> </ul> </div > <footer > <script src= " https :// ajax. googleapis.com /ajax /libs / jquery /2.1.4/ jquery.min.js"> </script > <script > $( document ). ready ( function () { $( "#main " ). children ().each ( function ( index ) { console.log ( "Dans #main, on a un " + this. nodename ); }); }); </script > </ footer > </body >
9 INSA - ASI TechnoWeb : jquery 9/24 Fonctionnalités basiques (5/13) Gestion des classes Test d une classe : $( selecteur ).hasclass( classe ); Ajout d une classe : $( selecteur ).addclass( classe ); Suppression d une classe : $( selecteur ).removeclass( classe ); Ajout d une classe, la supprime si elle existe : $( selecteur ).toggleclass( highlighted );
10 INSA - ASI TechnoWeb : jquery 10/24 Fonctionnalités basiques (6/13) Gestion des attributs Valeur d un attribut : $( selecteur ).attr( attribut ); NB : undefined est renvoyé si l élément ne dispose pas de l attribut Assignation d un attribut : $( selecteur ).attr( attribut, valeur ); Assignation d un ensemble d attributs : $( selecteur ). attr ( { attribut1 : valeur1,... attributn : valeurn });
11 INSA - ASI TechnoWeb : jquery 11/24 Fonctionnalités basiques (7/13) Gestion des CSS Modification d un attribut de la CSS d un élément : $( selecteur ).css( attribut-de-css, valeur ); Modification de plusieurs attributs de la CSS d un élément : $( selecteur ). css ( { attribut-de-css1 : valeur1,... attribut-de-cssn : valeurn });
12 INSA - ASI TechnoWeb : jquery 12/24 Fonctionnalités basiques (8/13) Gestion des dimensions NB : ces fonctions permettent également de fixer les valeurs
13 INSA - ASI TechnoWeb : jquery 13/24 Fonctionnalités basiques (9/13) Exemple Exemple3.html <!DOCTYPE html > <html > <head > <title > Exemple jquery 3 </title > <meta http-equiv= " Content-Type " content= "text /html ; charset=utf-8 "> <style > # main { width : 300 px; padding : 10 px; border : solid grey 2px; margin : 20 px; } </style > </head > <body > <head er><h1 > Exemple Jquery ( Dimensions )</h1> </head er> <div id= " main ">Contenu de la div </div> <footer > <script src= " jquery min.js"></script> <script > $( document ). ready ( function () { console. log ( " width = "+$("# main "). width ()); console.log ( " innerwidth = "+$("#main "). innerwidth ()); console.log ( " outerwidth = "+$("#main "). outerwidth ()); console.log ( " outerwidth (true ) = "+$("#main "). outerwidth (true )); }); </script > </ footer > </body > </html >
14 INSA - ASI TechnoWeb : jquery 14/24 Fonctionnalités basiques (10/13) Gestion du contenu des éléments Contenu textuel Récupération : $( selecteur ).text(); Modification : $( selecteur ).text( Nouveau contenu ); Contenu HTML Récupération : $( selecteur ).html(); Modification : $( selecteur ).html( <p>nouveau contenu avec balises HTML!</p> ); Attribut value Récupération : $( selecteur ).val(); Modification : $( selecteur ).val( Nouvelle valeur );
15 INSA - ASI TechnoWeb : jquery 15/24 Fonctionnalités basiques (11/13) Gestion du contenu des éléments Ajout au début d un élément : $( selecteur ).prepend( Contenu ); Ajout à la fin d un élément : $( selecteur ).append( Contenu ); Ajout avant un élément : $( selecteur ).before( Contenu ); Ajout après un élément : $( selecteur ).after( Contenu ); NB : le contenu ajouté peut être constitué de balises HTML Suppression du contenu d un élément : $( selecteur ).empty(); Suppression d un élément : $( selecteur ).remove(); NB : un élément supprimé du DOM peut encore être utilisé
16 INSA - ASI TechnoWeb : jquery 16/24 Fonctionnalités basiques (12/13) Exemple Exemple4.html <!DOCTYPE html > <html > <head > <title > Exemple jquery 4 </title > <meta http-equiv= " Content-Type " content= "text /html ; charset=utf-8 "> <style > # main { width : 300 px; padding : 10 px; border : solid grey 2px; margin : 20 px; } </style > </head > <body > <head er><h1 > Exemple Jquery ( Ajout de contenu )</h1> </head er> <div id= " main ">Contenu de la div </div> <footer > <script src= " jquery min.js"></script> <script > $( document ). ready ( function () { $( div #main ). append ( <br /> Ajouté dedans à la fin ); $( div #main ). prepend ( Ajouté dedans au début<br /> ); $( div #main ). before ( Ajouté avant ); $( div # main ). after ( Ajouté après ); }); </script > </ footer > </body > </html >
17 INSA - ASI TechnoWeb : jquery 17/24 Fonctionnalités basiques (13/13) Chaînage des éléments Exemple Toutes les fonctions retournent une liste d éléments (objet $). Elles peuvent donc être enchaînées (chaînables). balises = $(". toto "); balises = balises. append (" un texte "); balises = balises. css (" border ","1px solid red "); balises = balises. addclass (" titi "); balises = balises. removeclass (" toto "); balises = balises. removeclass (" tutu "); est équivalent à : $(". toto "). append (" un texte "). css (" border ","1px solid red "). addclass (" titi "). removeclass (" toto "). removeclass ( " tutu ");
18 INSA - ASI TechnoWeb : jquery 18/24 Interactivité (1/7) Animation d éléments Visibilité des éléments Apparition : $( selecteur ).show(); Masquage : $( selecteur ).hide(); Apparition ou masquage : $( selecteur ).toggle(); Animations avec effet Apparition : $( selecteur ).slidedown(); Masquage : $( selecteur ).slideup(); Apparition : $( selecteur ).fadein(); Masquage : $( selecteur ).fadeout(); Animation personnalisée $( selecteur ). animate ({ attribut- CSS1 : valeur1,... attribut- CSSn : valeurn }, vitesse );
19 INSA - ASI TechnoWeb : jquery 19/24 Interactivité (2/7) Exemple Exemple5.html <body > <head er><h1 > Exemple Jquery ( Animations )</h1> </head er> <div id= " bloquehauteur "> <div id= " main ">Contenu de la div </div> </div > <a href= "#" id= " hide "> hide< /a> <a href= "#" id= " show "> show< /a> <a href= "#" id= " toggle "> toggle< /a> <br /> <a href= "#" id= " slidedown "> slidedown< /a> <a href= "#" id= " slideup "> slideup< /a> <br /> <a href= "#" id= " fadein "> fadein< /a> <a href= "#" id= " fadeout "> fadeout< /a> <br /> <footer > <script src= " jquery min.js"></script> <script > $( document ). ready ( function () { $( # hide ). click ( function (){$( # main ). hide () ;}) ; $( # show ). click ( function (){$( # main ). show () ;}) ; $( # toggle ). click ( function (){$( # main ). toggle () ;}) ; $( # slidedown ). click ( function (){$( # main ). slidedown () ;}) ; $( # slideup ). click ( function (){$( # main ). slideup () ;}) ; $( # fadein ). click ( function (){$( # main ). fadein ( " slow ") ;}) ; $( # fadeout ). click ( function (){$( # main ). fadeout (" slow ") ;}) ; }); </script > </ footer > </body >
20 INSA - ASI TechnoWeb : jquery 20/24 Interactivité (3/7) Exemple Exemple6.html <body > <head er><h1 > Exemple Jquery ( Animate )</h1> </head er> <div id= " main ">Contenu de la div </div> <footer > <script src= " jquery min.js"></script> <script > $( document ). ready ( function () { $( # main ). animate ({ width : " 70% ", fontsize : "2em", borderwidth : "10 px" }, 1500 ); }); </script > </ footer > </body >
21 INSA - ASI TechnoWeb : JQuery 1 9 ÉVÉNEMENTS click load change keydown keyup mousedown mouseup submit focusin focusout Lors d un clic sur un élément Quand un élément à fini de se charger Lors du changement d une valeur d un champ de formulaire Lors de l appui sur une touche Lorsqu une touche est relâchée Lorsqu un bouton de la souris est enfoncé Lorsqu un bouton de la souris est relâché Lors de la validation d un formulaire Lorsque l on met le focus sur un champs Lorsque le focus sort du champs Liste de compatibilité des events :
22 INSA - ASI TechnoWeb : JQuery 2 0 «THIS» $( "p" ).click(function() { $ ( this ).toggleclass( "highlight" );}); Lors de l activation d un événement, «this» est la référence javascript de l objet courant. Mais pour en faire un objet jquery => $(this)
23 INSA - ASI TechnoWeb : JQuery 2 1 LES FONCTIONS ANONYMES $( a.okbutton ).click( function() { alert( Le bouton Ok ); }); Manque de lisibilité et des «réutilisabilité» des «function(){...}» $( a.okbutton ).click( dookbuttom);function dookbuttom() { alert( Le bouton Ok ); } Les déclarations de fonction n ont pas a être dans le $(document).ready(...);
24 INSA - ASI TechnoWeb : JQuery 2 2 FONCTIONS UTILES POUR LE DEBUG alert( Ca marche ); Mieux : console.log( Texte ); console.log(objet); Affiché dans la console du navigateur, avec la visibilité complete sur l object.
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
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/
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
Travaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
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
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Ajax, RIA et HTML5. 9.1 Prise en charge d Ajax
9 Ajax, RIA et HTML5 Au soaire de ce chapitre UU Prise en charge d Ajax UU Bibliothèques JavaScript UU Extensions CSS de WebKit UU Applications Internet riches mobiles UU HTML5 Ajax, HTML5 et RIA, coent
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.
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
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
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Technologie Web. Conception de sites Web. Alexandre Pauchet. INSA Rouen - Département ASI. INSA - ASI TechnoWeb : Rappels UML 1/21
INSA - ASI TechnoWeb : Rappels UML 1/21 Technologie Web Conception de sites Web Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : Rappels UML 2/21
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
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
Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs.
Le framework YUI et le développement 4D Par Olivier DESCHANELS, Responsable Programme 4D S.A. Note technique 4D-201004-08-FR Version 1 - Date 1 avril 2010 Résumé Dans la présente note technique, nous allons
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu
Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Table des matières AVANT-PROPOS... 1 Pourquoi ce
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
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
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
Panel des technologies Web
Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.
Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2
Bonnes pratiques de développement JavaScript
Bonnes pratiques de développement JavaScript Titre présentation Conférencier François Béliveau Romain Dorgueil A propos de nous... François Béliveau Développeur web depuis 8 ans Utilise symfony depuis
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
Extended communication server 4.1 : VoIP SIP service- Administration
Extended communication server 4.1 : VoIP SIP service- Administration Mai, 2008 Alcatel-Lucent Office Offer - All Rights Reserved Alcatel-Lucent 2007 Ce document explique comment configurer le Service VOIP-SIP
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS
Ajout du code de suivi Google Analytics Page 1 / 7 I. Création du compte sur Google Analytics 1. Connectez-vous à www.google.fr 2. Entrez «Google Analytics» dans la barre de recherche. 3. Cliquez sur le
Master1 ère année. Réseaux avancés I. TP nº5 filière ISICG
Master1 ère année Réseaux avancés I TP nº5 filière ISICG Utilisation de la microplateforme Bottle et du framework AngularJS La «micro web-framework» Bottle pour Python Les principales caractèristiques
Microsoft web framework
Microsoft web framework Sommaire Microsoft web framework... 3 Prérequis... 3 Remarques... 3 Le remote assistance... 3 Activation... 3 Adaptation au firewall... 3 WinrM... 4 Installation... 4 Etablissement
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013
Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326
Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully
Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery
Formation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur)
Publication par FTP FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur) Logiciels FTP nombreux (FileZilla, CuteFTP, WinSCP, FTP Expert).
3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures
3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures Objectif global : A l issue de la formation, les stagiaires doivent être opérationnels dans la création d un site internet
Programme ASI Développeur
Programme ASI Développeur Titre de niveau II inscrit au RNCP Objectifs : Savoir utiliser un langage dynamique dans la création et la gestion d un site web. Apprendre à développer des programmes en objet.
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions
Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1
Point sur les solutions de développement d apps pour les périphériques mobiles
Point sur les solutions de développement d apps pour les périphériques mobiles Par Hugues MEUNIER 1. INTRODUCTION a. Une notion importante : le responsive web design Nous sommes en train de vivre une nouvelle
MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site:
MANUEL WORDPRESS Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site: A/ Traitement de la base de données: Pour cette étape, vous aurez besoin au préalable
Audit SEO. I / Les Tranquilles d Oléron
Audit SEO I / Les Tranquilles d Oléron Données relatives au domaine : Nom de domaine : www.lestranquillesdoleron.com Âge : Moins d un an Bilan : Référencement de base présent, mais il est possible de le
Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Projet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
PROGRAMME DE LA 1ERE JOURNEE DE FORMATION : QUALITE WEB ET REFERENCEMENT NATUREL
DEVELOPPEMENT LOGICIEL QUALITE WEB LES BONNES PRATIQUES FRONT-END REF : WEER001 DUREE : 3 JOURS TARIF : 1 625 HT Public Chef de projet, webmestre, intégrateur, développeur, et toute personne liée au développement
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
ASP.NET MVC 4 Développement d'applications Web en C# - Concepts et bonnes pratiques
Introduction 1. Introduction 11 2. La plateforme de développement web de Microsoft 11 3. Définition du modèle de programmation MVC 14 4. L'historique d'asp.net MVC 17 4.1 ASP.NET MVC 1 (2008) 17 4.2 ASP.NET
La Clé informatique. Formation Internet Explorer Aide-mémoire
La Clé informatique Formation Internet Explorer Aide-mémoire Novembre 2003 Table des matières Novembre 2003...i Configuration d Internet Explorer... 1 Internet Explorer 6... 5 Gestion des Raccourcies...
Introduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
Diffuser un contenu sur Internet : notions de base... 13
Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Dojo Toolkit. Créer des applications AJAX/RIA en JavaScript. Thomas Corbière www.itsi-formation.com
Dojo Toolkit Créer des applications AJAX/RIA en JavaScript Auteur Site Web Dernière modification Dojo Toolkit Thomas Corbière www.itsi-formation.com 20/02/2012 (révision 3) 1.6 Ce support de cours est
WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu
Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Index 404 Notifier (erreurs 404) 62 A Adwords 148
Gestion d identités PSL Exploitation IdP Authentic
Gestion d identités PSL Exploitation IdP Authentic Entr ouvert SCOP http ://www.entrouvert.com Table des matières 1 Arrêt et démarrage 2 2 Configuration 2 2.1 Intégration à la fédération............................
< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
Technologies du Web. Créer et héberger un site Web. Pierre Senellart. Page 1 / 26 Licence de droits d usage
Technologies du Web Créer et héberger un site Web Page 1 / 26 Plan Planification Choisir une solution d hébergement Administration Développement du site Page 2 / 26 Cahier des charges Objectifs du site
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
Notice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
Content Management System. bluecube. Blue Cube CMS V4.3 par Digitalcube
Content Management System bluecube V4.3 1 SOMMAIRE Avant-propos Découvrir le CMS Blue Cube Les modules Les clients BLUE CUBE CMS V4.3 par Digitalcube 2 CMS sans bugs 3 Avant-propos Facile à prendre en
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
Rapport de projet Site web pour une association
51, rue Barthélémy de Laffemas BP 29 26901 Valence Cedex 9 Rapport de projet Site web pour une association Année 2006-2007 Bruno SABOT 1ère année DUT R&T Mathieu ROGER 2ème année DUT R&T Rapport réalisé
WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,