Tutoriel pour l introduction à l animation en HTML5 et JavaScript
|
|
- Jacqueline Labbé
- il y a 8 ans
- Total affichages :
Transcription
1 Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut
2 Table des matières 1. Introduction Création de l environnement Création d un fichier JavaScript Création d un objet graphique Affichage du texte La gestion du son... 8 Page 1 of 8
3 1. Introduction Ce tutoriel a pour but d aider des étudiants ou des professeurs débutant en HTML5 (HyperText Markup Langage) & JavaScript à réaliser une animation graphique avec ces deux outils. Ce tutoriel va essentiellement aborder des notions en JavaScript afin de créer une animation. Il n a donc pas pour but de vous apprendre à coder en JavaScript mais uniquement de vous apprendre à utiliser certaines fonctions. De plus la plupart des nouveautés d HTML5 ne seront pas abordé. 2. Création de l environnement Tout d abord nous allons créer un environnement HTML5 afin que le navigateur internet puisse interpréter votre code. <!DOCTYPE html> <html lang="fr"> <head> <title>votre TITRE</title> <meta charset="utf-8" /> </head> <body> <h1>lunar Lander</h1> <div id= conteneur > <canvas id="canvas" width="600" height="400"> <p> This browser does not support the <code>canvas</code> element. </p> </canvas> </div> </body> </html> Ici, pas de réelles difficultés, il s agit uniquement d une page HTML basique sans aucunes fioritures mais uniquement un cadre nommé «conteneur» contenant un «canvas». Vous pouvez donc rajouter une page de style de type CSS (Cascading Style Sheets) dans la balise <head> grâce à l inclusion suivante : <link rel="stylesheet" href="url_page_css.css" /> On remarque que la structure d une page HTML5 est légèrement simplifiée par rapport aux anciennes versions. La balise <canvas> est une spécificité du HTML5 et elle permet assez simplement de faire une animation graphique. En attribut de cette balise on passe deux arguments, width et height qui permettent de définir respectivement la largueur et la hauteur de notre animation. Nous verrons plus tard dans le tutoriel l ajout de la balise <audio> permettant de jouer un son. Page 2 of 8
4 A présent nous allons voir comment ajouter nos pages JavaScript. L ajout de ces pages ce fait juste avant la fin de la balise <body> grâce à l instruction suivantes : <script type="text/javascript" src="url_page_javascript.js"></script> Toutes les pages JavaScript seront appelés les unes après les autres, par conséquent il faut respecter un certain ordre c est-à-dire que si une page JavaScript est incluse dans une autre il faut la placer avant dans le code HTML. Afin de faciliter l appelle à la fonction principal de votre animation, il est préférable d appeler directement cette fonction au chargement du corps de la page. Pour ce fait on utilise la technique suivante : <body onload="initialisation_animation();"> Ainsi dès que la balise <body> est ouverte la fonction initialisation_animation() sera recherché dans vos pages JavaScript est exécuté. 3. Création d un fichier JavaScript Une page de type JavaScript est relativement simple à écrire. Débutons avec notre fonction d initialisation. function initialisation_animation() { //Corps de la fonction }; Dans le cadre de notre projet nous avons utilisé un certain de nombre de fonction permettant de gérer une animation. La fonction suivante est la principale fonction permettant d afficher une animation. Elle se compose de deux parties : (function drawframe () { //1ère partie window.requestanimationframe(drawframe, canvas); //2ème partie context.clearrect(0, 0, canvas.width, canvas.height); }()); _ La première partie sera suivie par le traitement des informations (interactions avec l utilisateur, calcul de position, changement des variables etc _ La seconde partie permet supprimer tout ce qui est affiché à l écran et donc elle sera suivit du nouvelle affichage de notre animations avec donc les nouvelles positions ou variables calculés juste précédemment. Page 3 of 8
5 Deux objets sont indispensables pour notre animation. Ce sont les objets que l on nommera canvas et context. Ils sont propres à notre cadre canvas définit sur notre page HTML. On les récupère de la façon suivante : var canvas = document.getelementbyid(canvas), context = canvas.getcontext('2d') ; Ces deux objets sont donc à définir avant la fonction drawframe car elle utilise l objet canvas. L objet context sera utilisé par la suite. 4. Création d un objet graphique Une fois notre page créer et notre affichage rafraîchit, il est quand même intéressant de savoir y «dessiner» des éléments. Cette création n est pas ce qu il y a de plus évident, c est pourquoi il existe un certain nombre de librairies permettant de créer des objets prédéfinis. Nous avons donc d écrit l utilisation d une de ces librairies dans notre deuxième tutoriel : «à l aide de la libraire JavaScript Box2D» Nous allons donc ici créer un élément de toutes pièces. Commençons par la construction d une ligne. Nous allons donc créer un fichier line.js qui contiendra toutes les spécificités de notre objet ligne. Dans ce fichier nous allons faire une première fonction qui servira à la création et l initialisation d une ligne. function Line (length, color) { if (length === undefined) { length = 60; } if (color === undefined) { color = "red"; } this.x = 0; this.y = 0; this.length = length; this.color = color; this.rotation = 0; } Les deux premières lignes du corps de la fonction permettent de définir une valeur par défaut au deux variables length et color si elles ne le sont pas précis au moment de la création. Les deux suivantes permettent de définir les coordonnées de base de la ligne à la position (0, 0). Attention cette coordonnée sera par défaut en haut à gauche de l écran. Enfin les trois dernières lignes permettent d initialiser les variables this.length, this.color et this.rotation par défaut. Il faut savoir que par défaut la variable length ne sera pas accessible dans d autres fonction, d où l utilisation du this.length qui elle le sera. Page 4 of 8
6 Entrons à présent dans le réel «dessin» de notre ligne. Pour ce fait nous allons créer une deuxième fonction dans le ce même fichier line.js qui sera nommée «draw». Line.prototype.draw = function (context) { }; Cette fonction est de type prototype c est à dire qu il s agit d une fonction propre à l objet. Cette méthode permet de rajouter des fonctions à un objet déjà existant ou de redéfinir une fonction existante. Enfin elle prend en paramètre l objet context car il sera nécessaire de le connaitre afin de pouvoir lui afficher une ligne. Puis un certain nombre de fonctions sont appelés pour commencer le dessin. Permet de sauvegarder les context à son état d origine. context.save(); Permet d appliquer un décalage si les coordonnées de base sont modifiées. context.translate(this.x, this.y); Permet d appliquer une rotation à l objet. context.rotate(this.rotation); Permet de définir l épaisseur de la ligne. context.linewidth = 1; Permet de définir la couleur de la ligne. context.strokestyle = this.color; Permet d initialiser le début du tracé. context.beginpath(); Déplace le curseur à la position indiquée. Cette fonction est très utilisée pour des objets comme des rectangles permettant de définir le centre du rectangle en son centre et donc de commencer le tracé à un de ses coins. context.moveto(0, 0); Permet de dessiner une ligne jusqu à la position x et y. Ici on part donc du point (0, 0) et on trace la ligne jusqu à la coordonnées (this.length, 0). On obtiendra donc une ligne horizontale de taille length. context.lineto(this.length, 0); Affiche la ligne. context.stroke(); Restaure le context dans son état d origine plus la ligne tracé. context.restore(); Page 5 of 8
7 Voici le résumé de notre fichier line.js : function Line (length, color) { if (length === undefined) { length = 60; } if (color === undefined) { color = "red"; } this.x = 0; this.y = 0; this.length = length; this.color = color; this.rotation = 0; } Line.prototype.draw = function (context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.linewidth = 1; context.strokestyle = this.color; context.beginpath(); context.moveto(0, 0); context.lineto(this.length, 0); context.stroke(); context.restore(); }; Page 6 of 8
8 5. Affichage du texte Nous allons à présent voir comment on peut afficher du texte sur notre animation. L affichage du texte est très utile et peut avoir différente fonction comme l affichage des variables du jeu, afficher un message à l utilisateur etc Tout d abord, il faut définir la taille du texte ainsi que sa police grâce à l instruction suivante : context.font = "8pt Calibri"; Puis, il faut définir la couleur du texte : context.fillstyle = "rgb(255, 255, 255)"; Cette couleur peut-être définit directement en indiquant le nom de la couleur en Anglais, en héxadecimal ou en RGB (red, green, blue) comme dans l exemple. Ici la couleur du texte sera donc blanche. Enfin il faut définir le contenu du texte ainsi que son emplacement : context.filltext( Votre texte, 100, 100); Pour résumé, dans cette exemple il y aura le texte «Votre texte» affiché à partir de la coordonnées (100, 100) en blanc et écrit en taille 8 en calibri. Page 7 of 8
9 6. La gestion du son Passons à présent à la gestion du son. En effet dans quasiment toutes les animations, un certain nombre de bande-son sont présentes que ce soit en introduction, pour signaler un événement précis, la fin d une partie ou autre. Commençons tout d abord par rajouter l élément nécessaire dans notre page HTML. <audio id="player"> This browser does not support the <code>audio</code> element. </audio> La balise <audio> fait donc partie des nouveautés d HTML5. Même si un affichage d un lecteur audio est visible après l ajout de cette balise, on ne s occupera pas de cet affichage. Puis nous allons initialiser les paramètres du lecteur. Dans un fichier JavaScript, par exemple sound.js nous allons faire une fonction qui sera appelé lors d un événement et qui aura pour but de jouer le son voulu. Il faut tout d abord initialiser le lecteur avec le son voulu : document.getelementbyid("player").setattribute('src', 'ressource/explosion.wav'); Ici on récupère l élément «player» et on lui attribue notre son grâce à la fonction setattribut. Puis il suffit jouer le son avec la fonction play. Pour continuer notre exemple : document.getelementbyid("player").play(); Il y a d autres fonctions disponibles pour la balise <audio>. Comme par exemple la fonction pause() ou encore la fonction loop. La fonction loop s utilise ainsi : document.getelementbyid("player").loop = true; Elle permet une boucle sur le son, et donc si le son arrive à la fin il est directement rechargé et rejoué. Nous arrivons à la fin de ce tutoriel. Il s agit bien évidement que d une ébauche de toutes les possibilités offertes par ces deux langages couplés. En revanche, les outils présentés ici nous ont permis de développer une animation assez simpliste sur le point de vue graphique mais contenant des équations physique permettant de faire une représentation de la réalité. De plus nous avons réalisé cette animation en peu de temps (environ deux semaines) en partant d un niveau proche de zéro dans ces langages. Page 8 of 8
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Plus en détailLES 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
Plus en détail.. 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
Plus en détailHTML, 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
Plus en détailFormation 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
Plus en détailHTML. 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
Plus en détailTP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Plus en détailTutoriel : 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?
Plus en détailSommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Plus en détailKompoZer. 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
Plus en détailOptimiser 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...
Plus en détailPré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...
Plus en détailINTRODUCTION 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
Plus en détailRAPPORT 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
Plus en détail< 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
Plus en détailDémonstration de la mise en cache via HTML 5 sur iphone
Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent
Plus en détailNotes 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
Plus en détailSOUTENANCE 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
Plus en détailCanvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1
Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1 Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans
Plus en détailRESPONSIVE 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
Plus en détailGuide 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
Plus en détailTous 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
Plus en détailTravaux 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
Plus en détailPartie publique / Partie privée. Site statique site dynamique. Base de données.
Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.
Plus en détailServeur d'application Client HTML/JS. Apache Thrift Bootcamp
Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/
Plus en détailPERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT
PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT PAYBOX SYSTEM Point Transaction Systems, 11 A, rue Jacques Cartier - 78280 Guyancourt - FRANCE Société par Actions Simplifiée au capital de
Plus en détailJOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
Plus en détailInitiation 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
Plus en détailComment créer des rapports de test professionnels sous LabVIEW? NIDays 2002
Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002 De nombreux utilisateurs rencontrant l équipe de National Instruments nous demandent comment générer un rapport complet à partir
Plus en détailProgrammation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
Plus en détailMedia 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
Plus en détailLa Clé informatique. Formation Excel XP Aide-mémoire
La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles
Plus en détailTUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives
Plus en détailNormes 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
Plus en détailAuteur 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
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détail4. Personnalisation du site web de la conférence
RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»
Plus en détailE-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
Plus en détailIntroduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Plus en détailChapitre IX. L intégration de données. Les entrepôts de données (Data Warehouses) Motivation. Le problème
Chapitre IX L intégration de données Le problème De façon très générale, le problème de l intégration de données (data integration) est de permettre un accès cohérent à des données d origine, de structuration
Plus en détailDescription 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
Plus en détailGnuplot. Chapitre 3. 3.1 Lancer Gnuplot. 3.2 Options des graphes
Chapitre 3 Gnuplot Le langage C ne permet pas directement de dessiner des courbes et de tracer des plots. Il faut pour cela stocker résultats dans des fichier, et, dans un deuxième temps utiliser un autre
Plus en détailBernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Plus en détailSoon_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
Plus en détailInitiation à 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
Plus en détailMANUEL D UTILISATION ORBITVU EDITOR V.3
MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières
Plus en détailProgrammation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Plus en détail1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Plus en détailAutour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
Plus en détailTutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Plus en détail{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
Plus en détailIntroduction à MATLAB R
Introduction à MATLAB R Romain Tavenard 10 septembre 2009 MATLAB R est un environnement de calcul numérique propriétaire orienté vers le calcul matriciel. Il se compose d un langage de programmation, d
Plus en détailSTID 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
Plus en détailECLIPSE ET PDT (Php development tools)
ECLIPSE ET PDT (Php development tools) Eclipse Eclipse est un IDE (Integrated Development Environment)).C estun projet de la Fondation Eclipse visant à développer tout un environnement de développement
Plus en détailTable des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13
Voici un petit tutoriel d'utilisation du tableau numérique de la marque promethean. Ce tutoriel est loin d'être complet, il permet juste une première approche simple des outils de base du logiciel ACTIVstudio.
Plus en détailPack 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é
Plus en détailLe logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Plus en détailCréation d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7
Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7 L animation est obtenue par défilement des images décomposant le mouvement de traçage de la signature. Les étapes successives seront : 1. Choix de la
Plus en détailBoard (Tablette) Manuel de l utilisateur. Windows 7 / XP / Vista
Board (Tablette) Manuel de l utilisateur Windows 7 / XP / Vista *Il se peut que le pilote ait déjà été mis à jour sur une version plus récente avant/après l emballage. Si votre écran d installation ne
Plus en détailFormation : 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
Plus en détailPrise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
Plus en détailHTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles
46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes
Plus en détailCréer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Plus en détailRESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels
Plus en détailCRÉ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
Plus en détailFormulaire pour envoyer un mail
Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est
Plus en détailL envoi d un formulaire par courriel. Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248
L envoi d un formulaire par courriel Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248 Chapitre 9 L envoi d un formulaire par courriel L envoi par courriel d informations
Plus en détailLangage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
Plus en détailDevenez 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
Plus en détailDécouverte du logiciel ordinateur TI-n spire / TI-n spire CAS
Découverte du logiciel ordinateur TI-n spire / TI-n spire CAS Mémento Ouvrir TI-Nspire CAS. Voici la barre d outils : L insertion d une page, d une activité, d une page où l application est choisie, pourra
Plus en détailHMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Plus en détailCréation WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
Plus en détailTutoriel de démarrage rapide destiné aux EDITEURS
Tutoriel de démarrage rapide destiné aux EDITEURS 2007 Joseph Beeson josephbeeson@gmail.com Sous une licence Creative Commons : Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales.
Plus en détailDOM - Document Object Model
DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et
Plus en détailDocument Object Model (DOM)
Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés
Plus en détailCréer une connexion entre Sage CRM et Sage Etendue pour émettre directement des devis et commandes
Créer une connexion entre Sage CRM et Sage Etendue pour émettre directement des devis et commandes Produits concernés : Sage 100 CRM i7, Sage 100 Etendue. L objectif Créer un lien entre Sage CRM et Sage
Plus en détailCOMMENCER AVEC VUE. Chapitre 1
Chapitre 1 COMMENCER AVEC VUE Traduction en français du premier chapitre du manuel d'utilisation du logiciel VUE. Traduit de l'américain par Bernard Aubanel. CRÉER UNE NOUVELLE CARTE Pour ouvrir VUE: 1.
Plus en détail3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Plus en détailManuel d utilisation 26 juin 2011. 1 Tâche à effectuer : écrire un algorithme 2
éducalgo Manuel d utilisation 26 juin 2011 Table des matières 1 Tâche à effectuer : écrire un algorithme 2 2 Comment écrire un algorithme? 3 2.1 Avec quoi écrit-on? Avec les boutons d écriture........
Plus en détailFLEX 3. Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder. Aurélien Vannieuwenhuyze
Programmation FLEX 3 Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder Aurélien Vannieuwenhuyze Avec la contribution de Romain Pouclet Groupe Eyrolles, 2009, ISBN : 978-2-212-12387-6
Plus en détailMESUREZ L'IMPACT DE VOS CAMPAGNES!
MESUREZ L'IMPACT DE VOS CAMPAGNES! Concrètement, qu est-ce que mesurer l'impact de vos campagnes? L'utilisateur, après avoir envoyé une campagne e-mailing, peut mesurer son impact en consultant les résultats
Plus en détailTUTORIEL PAINTPOT. Louise Henninot - Anne- Cécile Patou - Julie Roquefort
TUTORIEL PAINTPOT Le joueur customise au gré de ses envies images et photos! Faire des points et des courbes aux couleurs de l arc en ciel, voilà une application ludique pour laisser cour à sa créativité!
Plus en détailGuide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de
Guide de l utilisateur Faites connaissance avec la nouvelle plateforme interactive de Chenelière Éducation est fière de vous présenter sa nouvelle plateforme i+ Interactif. Conçue selon vos besoins, notre
Plus en détailGestion 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............................
Plus en détailLes 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
Plus en détailDéploiement d application Silverlight
Déploiement d application Silverlight Thibault Laurens Bastien Chauvin 2 Déploiement d'application Silverlight 17/06/09 Sommaire 1 Introduction... 3 2 Intégrer une application à une page Web... 4 3 Les
Plus en détailFlex. Lire les données de manière contrôlée. Programmation Flex 4 Aurélien VANNIEUWENHUYZE
Flex Lire les données de manière contrôlée 1 Plan Lier les données Stocker les données Valider les données 2 Gérer des données Lier des données La notion de DataBinding est l une des plus importantes du
Plus en détailINTERNET 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.
Plus en détailSé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)
Plus en détailIntroduction 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
Plus en détailGUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
Plus en détailJ ai peur des souris mais je me soigne Petit manuel à l attention des profs de langues vivantes désireux d affronter le Monstre Informatique
J ai peur des souris mais je me soigne Petit manuel à l attention des profs de langues vivantes désireux d affronter le Monstre Informatique Les Fondamentaux du Prof de Langues Pourquoi ce manuel? Pour
Plus en détailCampagnes d e-mailings v.1.6
Campagnes d e-mailings v.1.6 Sommaire Objet Page I Préparation de la campagne 3 I 1 / Le compte de messagerie pour l envoi des emails 3 I 2 / Configurer le modèle de l email 4 I 3 / La préparation des
Plus en détailLANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
Plus en détailFTP : 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).
Plus en détailComment créer son propre monitoring. (Version simple PHP)
Comment créer son propre monitoring. (Version simple PHP) TUTORIELS Louis Foraux DROID CENTER HTTP://DROID CENTER.TK Table des matières Présentation du projet... 2 Crédits... 2 Utilisation... 2 Infos Utiles...
Plus en détailCréer une base de données vidéo sans programmation (avec Drupal)
Créer une base de données vidéo sans programmation (avec Drupal) 10.10.2013 Nicolas Bugnon (nicolas.bugnon@alliancesud.ch) Centre de documentation Alliance Sud www.alliancesud.ch Résultat de l atelier
Plus en détail