DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie
|
|
- Valentin Aubin
- il y a 8 ans
- Total affichages :
Transcription
1 DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui peut avoir les attributs suivants : width height id Par défaut les dimensions sont de 300 par 150 pixels Avec canvas on peut réalises des dessins statiques ou animés en 2D. Donc canvas remplace Flash Dans ce premier tutoriel nous allons traiter des images statiques. Dans un deuxième tutoriel nous traiterons des animations. Nous n'utiliserons pas la librairie jquery et pourtant le code HTML et JAVASCRIPT seront bien dissociés : plus aucune référence au JS dans le code HTML. 1 DESSINER DES RECTANGLES Un carré n'est une forme particulière de rectangle! 1.1 LA PAGE NOMMÉE 'RECTANGLES_VIDES.HTM' LE CODE LA PAGE <style> canvas { display : block ; border: 1px solid black; margin-left : auto ; margin-right : auto ; margin-top : 50px ; } </style></head> <canvas width = '300' height = '300'> <p>votre navigateur est obsolète</p> </canvas> var canvas = document.queryselector('canvas'); var contexte = canvas.getcontext('2d'); contexte.strokerect(20,20,100,100); contexte.strokerect(40,40,100,100); contexte.strokerect(60,60,100,100); contexte.strokerect(80,80,100,100); contexte.strokerect(100,100,100,100); contexte.strokerect(120,120,100,100); contexte.strokerect(140,140,100,100); </body></html> APERÇU contexte.strokerect(160,160,100,100); contexte.strokerect(180,180,100,100); 9 carrés de 100 par 100 Chaque carré a son arête supérieure gauche décalée de 20 pixels à droite et en bas par rapport au précédent COMMENTAIRES Du CSS : 1 sur 17
2 L'objet de type canvas a été transformée en objet de type block afin de pouvoir le centrer horizontalement Du HTML : La boîte aura une taille de 300 par 300 Si vous testez cette page avec un vieux navigateur le message : "votre navigateur est obsolète" va apparaître Du JAVASCRIPT : La variable canvas référence la balise canvas. On a utilisé la nouvelle méthode queryselector qui peut être argumenté avec un nom de balise ou un nom de classe ou un nom d'id La variable contexte va chercher l'api de dessin 2D et l'appliquer à la variable canvas Une API de dessin 3D est prévue à terme La fonction strokerect() permet de dessiner les contours d'un rectangle Syntaxe de cette fonction strockerect(x,y, largeur, hauteur) avec x et y sont les coordonnées de l'arête supérieure gauche du rectangle Par défaut le contour est en noir avec une largeur de 1pixel EMPLACEMENT DUS SCRIPT JS Le script est automatiquement appelé puisqu'il il est inséré dans la partie body après code HTML Attention si le script JS est dans la partie body mais avant la balise canvas vous aurez le message d'erreur suivant : canvas is null en effet on ne peut manipuler en JS un objet HTML qui n'existe pas encore! 1.2 LA PAGE NOMMÉE 'RECTANGLES_PLEINS.HTM' APERÇU LE CODE Seule le code JS est changé par rapport à la page précédente : var canvas = ; var contexte = contexte.fillstyle = "rgba(255,0,0,0.5)" ; for (i=1; i<=8; i++) { contexte.translate(20,20) ; // déplacement origine pour rectangle suivant contexte.fillrect(0,0,100,100); // dessiner un rectangle plein } // fin for // huit rectangles décalés COMMENTAIRE La méthode fillstyle permet de définir une couleur de remplissage. On peut utiliser une couleur transparente avec la notation rbga (La quatrième valeur est l'alpha) La méthode translate(x,y) permet de déplacer le point d'origine. Lors de chaque passage dans la boucle on déplace le point d'origine de 20 pixels à droite et en bas 2 sur 17
3 Donc pour chaque rectangle l'arête haut et gauche est toujours la nouvelle origine (0,0) La méthode fillrect crée des rectangles pleins Syntaxe de fillrect(x,y, largeur, hauteur) avec x et y coordonnées de l'arête supérieure gauche du rectangle 1.3 LA PAGE NOMMÉE 'RECTANGLES_VIDES_ET_PLEINS.HTM' Dans cette page il y a deux canvas de 300 par 300. Pour les distinguer les deux zones de dessin il faut bien sûr utiliser un id différent! APERÇU COMMENTAIRES Dans le canvas de gauche 8 rectangles vides avec un contour vert de 5 pixels d'épaisseur Dans le canvas de droite 8 rectangles pleins de couleur verte (lime) avec un alpha de 0.5 A chaque fois il y a un décalage de 20 pixels à droite et à gauche de l'arête haute et gauche du rectangle par rapport au précédent LE CODE (EXTRAITS) <style> canvas { display : inline-block ; border: 1px solid black; margin : 20px ; } </style></head> <canvas width = '300' height = '300' id = 'dessin1'> <p>votre navigateur est obsolète</p> </canvas> var canvas1 = document.queryselector('#dessin1'); var contexte = canvas1.getcontext('2d'); contexte.strokestyle = 'green'; contexte.linewidth = '5' ; for (i=1; i<=8; i++) { ; // déplacement du point d'origine ; // dessiner rectangle vide } <canvas width = '300' height = '300' id = 'dessin2'> </canvas> var canvas2 = document.queryselector('#dessin2'); </body></html> ANALYSE DU CODE Du CSS : 3 sur 17
4 Display : inline-block pour créer des boîtes 'en ligne' c'est à dire sans saut de ligne! Du JS : Deux scripts JS : l'un après le premier canvas l'autre après le deuxième canvas La méthode strokestyle() pour définir une couleur de contour La méthode linewidth() pour définir l'épaisseur du contour On doit produire 8 rectangles donc on crée une boucle qui est répété 8 fois 1.4 EXERCICE : LE DRAPEAU SUISSE APERÇU COMMENTAIRE Canvas de 400 par 400 Drapeau : 200 par 200 au centre du canvas donc arête supérieure gauche du rectangle rouge a les coordonnées suivantes : x : 400 /2-200 / 2 = y : A l'intérieur du rectangle rouge deux rectangles blancs : un rectangle de 140 par 40 centré verticalement dans drapeau donc arête supérieure gauche de ce rectangle dans le drapeau est : x = ( ) / 2 = 30 ; y = (200-40) / 2 = 80 Donc arête supérieure gauche par rapport à canvas : x = ; y = un rectangle de 40 par 140 centré horizontalement dans drapeau donc arête supérieure gauche de ce rectangle dans le drapeau est : x = (200-40) / 2 = 80 ; y = ( ) / 2 = LE CODE DE LA PREMIÈRE VERSION : 'DRAPEAU_SUISSE.HTM' <canvas width = '400' height = '400'> <p></p> </canvas> var canvas = var contexte = = 'red'; contexte.fillrect( contexte.clearrect(130,180,140,40); // attention coordonnées de l'arête supérieure gauche de la bande par rapport à canvas! contexte.clearrect( </body></html> ANALYSE DU CODE La méthode clearrect() est une gomme qui efface l'équivalent d'un rectangle Syntaxe de clearrec(x, y, largeur, hauteur) avec x et y coordonnées de l'arête supérieure gauche du rectangle 4 sur 17
5 1.4.5 CRITIQUES DU CODE Pour dessiner les deux bandes d'effacement il faut d'abord déterminer les coordonnées de l'arête supérieure gauche des deux bandes dans le drapeau et ensuite dans le canvas. C'est fastidieux Le raisonnement serait plus simple si on faisait un changement d'origine! 'DRAPEAU_SUISSE_BIS.HTM' Dans cette version les coordonnées de l'arête supérieur des bandes sont déterminées par rapport à l'arête supérieure gauche du drapeau Le canvas fait 400 par 400 ; le drapeau de 200 par 200 est centré dans canvas Extrait du script : contexte.fillstyle = 'red'; contexte.fillrect(100,100,200,200) ; contexte.translate(100,100); contexte.clearrect( contexte.clearrect( 5 sur 17
6 2 TRACER DES LIGNES DROITES 2.1 LA PAGE NOMMÉE 'CROIX_SAINT_ANDRE.HTM' APERÇU Canvas de 200 par 200. Croix de Saint André centrée dans le canvas Première droite démarre à 50, 50 et se termine à 150,150 Deuxième droite démarre à 150,50 et se termine à 50, LE CODE DE LA PAGE (EXTRAITS) <canvas width ='200' height ='200'> <p>votre navigateur </p></canvas> canvas = ; contexte = ; X = canvas.width ; Y = canvas.height; // donc X vaut et Y vaut : contexte.beginpath();//on démarre un nouveau tracé contexte.moveto(x/4, Y/4); // on place le stylo au point 50, 50 contexte.lineto(x-x/4,y-y/4); // première droite contexte.moveto(x-x/4, Y/4); contexte.lineto(x/4,y-y/4); // deuxième droite contexte.linewidth = 3 ; // épaisseur du trait contexte.stroke() ; //tracer les droites COMMENTAIRE Il est très facile de récupérer les dimensions du canvas avec les propriétés JS width et height Il faut tracer deux diagonales! La méthode beginpath() indique le début du tracé La fonction moveto permet de placer le stylo La fonction lineto permet de tracer (mais sans encre) la première droite On déplace le stylo (moveto) puis on trace la deuxième droite (lineto) Ensuite il faut utiliser l'encre : fonction stroke() pour tracer effectivement les droites avec l'épaisseur précisée par la propriété linewidth LES SYNTAXES La méthode moveto(x,y) avec x et y : coordonnées du point de départ de la droite La méthode lineto(x,y) avec x et y : coordonnées du point d'arrivée de la droite REMARQUES Les points de départ et d'arrivé des droites sont définies par rapport aux dimensions du canvas. Donc on peut modifier la taille du canvas sans qu'il soit nécessaire de modifier le code de la fonction JS TESTS Redimensionnez canvas : 300 par 300 et testez Redimensionnez canvas : 400 par 400 et testez 6 sur 17
7 2.2 LA PAGE NOMMÉE 'PARALLELOGRAMME' APERÇU COMMENTAIRE Canvas de 300 par 300 La forme dans canvas : point de départ de la forme : 100, 50 point d'arrivée première droite : 250,50 point d'arrivée deuxième droite : 200, 250 point d'arrivée troisième droite : 50, 250 point d'arrivé quatrième droite = point de départ première droite contour de la forme de 3 pixels en vert fond de la forme remplie de rouge LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> contexte.beginpath();//on démarre le tracé contexte.moveto(100,50); contexte.lineto(); contexte.lineto(); contexte.lineto(); contexte.lineto(); contexte.linewidth = 3 ; // épaisseur du trait de contour contexte.strokestyle ='green'; // couleur contour contexte.stroke() ; //tracer le contour contexte.fillstyle ='red'; // couleur de fond contexte.fill() ; COMMENTAIRE // colorier le fond 2.3 UN TRIANGLE APERÇU DE LA PAGE "TRIANGLE.HTM" Canvas de 300 par 300 ; triangle avec fond rouge et borduré de vert 7 sur 17
8 2.3.2 LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> contexte.beginpath(); // début de la forme contexte.moveto(0, 300); //On se déplace au coin inférieur gauche contexte.lineto(); // première droite jusque 150,0 contexte.lineto(); // deuxième droite jusque 300, 300 contexte.lineto(); // troisième droite jusque 0, 300 ='green'; = 3 ; contexte.stroke(); ='red'; contexte.fill(); LA PAGE NOMMÉE "TRIANGLE_BIS.HTM" Le code de la fonction doit être indépendant de la taille du canvas. Il faut donc utiliser les variables X et Y représentant respectivement la largeur et la hauteur du canvas Testez le code JS avec un canvas de 200 par 200 puis de 400 par EXERCICE : LA PAGE NOMMÉE 'TRIANGLES.HTM' APERÇU Canvas de 500 par triangles isocèles et rectangles ; Les côtes de l'angle droit valent 100px Le premier rectangle a son angle rectangle qui coïncide avec l'arête supérieure gauche de canvas ; le suivant est décalé à droite et en bas de 50 Les triangles sont bordurés de violet (épaisseur de 5) et sont remplis de vert olive LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> = 'purple'; = '5'; ='olive'; for (i=1; i <= 9; i++) { 8 sur 17
9 contexte.beginpath() ; // début forme contexte.moveto(0,0); contexte.lineto() ; contexte.lineto() ; contexte.lineto(); ; // remplir le fond ; // dessiner contour contexte.translate(50,50); // déplacement point d'origine } // fin for 2.5 LA PAGE NOMMÉE 'SERGENT_CHEF.HTM' Dans l'armée française et pour les sous officiers subalternes les insignes de grade sont des chevrons dorés (ou argentées). Un sergent : 2 chevrons ; un sergent chef : 3 chevrons APERÇU Canvas de 200 par 200 Chevrons d'épaisseur 20 et de couleur or Premier chevron : point de départ : 30, 100 première droite jusqu'à 100, 30 deuxième droite jusqu'à 170, 100 Pour le chevron suivant le y du point de départ augmente de LE CODE JS (EXTRAIT) = "gold"; = 20; for ( ) { contexte.beginpath(); (30,100); (100,30); (170,100); contexte.stroke(); (0,40); } // fin for 9 sur 17
10 3 TRACER DES CERCLES ET ARCS DE CERCLE Deux cercles dans le même canvas 3.1 LA PAGE 'CERCLES.HTM' APERÇU COMMENTAIRE Dimensions du canvas : 200 par 200 Deux cercles de rayon de X/4 Un cercle plein (en jaune) et à côté le contour d'un autre cercle (épaisseur de 5px et couleur orange) Premier cercle a pour centre : X/4 et Y/4 Deuxième cercle a pour centre : X/2 et Y/ LE CODE JS (EXTRAIT) contexte.beginpath(); // début premier cercle contexte.arc(x/4, Y/4, X/4, 0, Math.PI*2); //On trace la courbe délimitant notre forme ='yellow'; contexte.fill(); contexte.beginpath(); //début deuxième cercle contexte.arc(); //On trace la courbe délimitant notre forme = 5;. = 'orange'; contexte.stroke(); SYNTAXE Pour dessiner des arcs de cercle et des cercles il faut utiliser la méthode arc Syntaxe de la méthode : arc(x, y, rayon, angle départ, angle fin [, sens inverse]) x et y sont les coordonnées du centre du cercle angle de départ et angle de fin sont exprimés en radians le sens inverse est facultatif (par défaut false). Si vous tapez true alors vous dessinez un arc de cercle dans le sens inverse des aiguilles d'une montre Un cercle complet c'est un arc de cercle de 360 ou 2 * Π radians PASSAGE DEGRÉS À RADIANS On a l'habitude de raisonner en degrés et non pas en radians. Le tableau ci-dessous vous aide à faire le passage degrés radians 10 sur 17
11 Grâce au dessin ci-dessus vous pouvez remplir le tableau ci-dessous degrés radians Π * Π TESTS Essayez avec un canvas de 300 par 300 Essayez avec un canvas de 400 par EXERCICE 1 : LA PAGE NOMMÉE 'SENS_INTERDIT.HTM' APERÇU COMMENTAIRE Canvas de 300 par 300 Cercle plein au centre du canvas avec un rayon de 100 Bande d'effacement de 160 par 40 au centre du cercle donc au centre du canvas. Donc arête supérieure gauche de cette bande d'effacement est x = 150 (160/ 2) = y = 150 (40/2) = LE CODE DE LA PAGE </style> window.onload = function() { canvas = ; contexte = ; contexte.beginpath(); //On démarre cercle plein contexte.arc( ='red'; contexte.fill(); contexte.clearrect(); ); //On trace la courbe délimitant notre forme } </head> <canvas width = '300' height ='300'><p>Votre navigateur est obsolète</p></canvas> </body></html> 11 sur 17
12 3.2.4 REMARQUE Le script JS est écrit dans la partie head de la page! Le code JS correspondant à la création de la forme est intégrée dans une fonction anonyme. Cette fonction est appelée lors du chargement de la page window.onload =function() C'est l'équivalent en JQUERY de : $(document).ready(function() APERÇU 3.3 EXERCICE 2 : LA PAGE NOMMÉE 'DEMI_CERCLES.HTM' COMMENTAIRE Canvas de 300 par 200 Chaque demi-cercle a un rayon de 50 (ou X/6) Centre du premier demi-cercle (100, 100) ou (X/3, Y/2) Centre du deuxième demi-cercle (200, 100) ou (X/3*2, Y/2) Les deux demi-cercles ont un fond orange LE CODE DE LA FONCTION ANONYME X = ; Y = ; ='orange'; contexte.beginpath(); ; //premier demi cercle contexte.fill(); contexte.beginpath(); ; //deuxième demi-cercle contexte.fill(); TEST Testez avec un canvas de 600 par 400 puis de 150 par VARIANTE : DEMI_CERCLES_ BIS.HTM Canvas de 600 par 400 Epaisseur du trait 5 pixels ; couleur du trait : orange Reconstituez le code de cette page en vous inspirant de la page précédente 3.4 EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM' Nous devons dessiner un coeur 12 sur 17
13 3.4.1 ANALYSE DU PROBLÈME Cette image nous montre qu'il s'agit de quatre arcs de cercle appartenant à quatre cercles contigus SOLUTION Canvas de 300 par 300 Les quatre cercles ont pour centre (x, y) : cercle haut gauche : 100, 100 cercle haut droit : 200,100 cercle bas gauche : 100, 200 cercle bas droit : 200, 200 cercle arc de cercle dans ce cercle (en radians) haut gauche de 0,5 à 2 haut droit de 1 à 0,5 bas gauche de1,5 à 2 bas droit de 1 à 1,5 Contour des arcs : rouge avec une épaisseur de LE CODE LA FONCTION (EXTRAIT) contexte.beginpath(); contexte.arc(100, 100, 50, 0.5 * Math.PI, 2 * Math.PI); // premier arc de cercle contexte.stroke(); contexte.beginpath(); contexte.arc(200, 100, 50,Math.PI, Math.PI * 0.5); // deuxième arc de cercle contexte.stroke(); 3.5 EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM' APERÇU Canvas de 300 par sur 17
14 les cercles hauts sont pleins Remplissage de la zone délimitée quatre arcs de cercles de 90 appartenant aux quatre cercles Les quatre arcs de cercle : inscrit dans le cercle arc de cercle haut gauche de 0 à 0.5 Π haut droit de 0.5 Π à Π bas gauche de 1.5 Π à 2 Π bas droit de Π à 1.5 Π Il y a donc trois formes donc trois instructions : beginpath() LE CODE DE LA FONCTION contexte.fillstyle = 'red'; contexte.beginpath(); // premier cercle plein contexte.beginpath(); // deuxième cercle plein contexte.beginpath(); // forme à l'intérieur de quatre arcs de cercle contexte.arc( contexte.arc( contexte.arc( contexte.arc( contexte.fill(); 14 sur 17
15 4 IMPORTER IMAGES DANS CANVAS L'un des intérêt majeur de canvas est de pouvoir importer des images et de les modifier. L'importation basique peut se faire via la propriété CSS background-image (ou son équivalent en JS : backgroundimage) 4.1 LA PAGE 'IMPORTER_IMAGE0.HTM' APERÇU Canvas de 800 par 600 (taille de l'image tortue.jpg) On a ajouté à une image existante une bulle. Une bulle c'est un rectangle avec du texte plus un triangle LE CODE DE LA PAGE <style> canvas { ; background-image : url(tortue.jpg) ; } </style></head> <canvas width = '800' height = '600'></canvas> = 'white' ; (500,100, 300, 100); // rectangle à fond blanc ='navy'; // couleur du texte ='center'; = " bold italic 20px arial" ; ("Que c'est dur la vie!", 650, 150) ; contexte.beginpath();//on démarre un nouveau tracé contexte.moveto(700, 200);//On se déplace au coin inférieur gauche (750, 200); (650, 280); (700, 200); = 'white'; // couleur de fond triangle de la bulle contexte.fill() ; 4.2 EXERCICE : LA PAGE NOMMÉE 'IMPORTER_IMAGES_ALEATOIRE.HTM' Dans la boîte canvas s'affiche de façon aléatoire l'une des cinq images et la légende correspondante à cette image APERÇU Canvas de 800 par sur 17
16 4.2.2 LE CODE DU SCRIPT var X = canvas.width ; var Y = canvas.height; var tab_images = new Array('foret.jpg', 'tortue.jpg', 'jardin.jpg', 'toucan.jpg', 'riviere.jpg') ; var tab_legendes = new Array('la forêt', 'la tortue', 'le jardin', 'le toucan', 'la rivière'); var rang = Math.floor(Math.random()* tab_images.length) ; // retourne un entier compris entre 0 et 4 (si 5 images) var nom_image = tab_images[rang]; // retourne le nom d'une des images var url = "url(" + nom_image + ")"; // retourne le chemin de l'image var legende = tab_legendes[rang]; canvas.style.backgroundimage = url ; // création d'une bulle centrée horizontalement et de X/2 de large et haute de 100 // donc coordonnées de la bulle : X/4, 500 // insertion du contenu de la variable legende // Texte centré verticalement et horizontalement dans la bulle // couleur de texte : navy // mise en forme du texte : bold italic 20px arial 4.3 LA MÉTHODE DRAWIMAGE() Si vous voulez importer une image et : la positionner dans canvas et/ou la redimensionner et/ou la rogner Vous devez alors utiliser la méthode JS drawimage() appliquée à un nouvel objet de type image APERÇU 4.4 LA PAGE NOMMÉE 'IMPORTER_IMAGE1.HTM' Canvas de 1000 par sur 17
17 Image de 800 par 600 est centrée horizontalement et verticalement dans canvas LE CODE JS (EXTRAIT) var X = canvas.width; var Y = canvas.height; var image = new Image(); image.src = 'tortue.jpg'; var x = (X - image.width) / 2 ; var y = (Y - image.height) / 2 ; contexte.drawimage(image,x,y); LA MÉTHODE DRAWIMAGE Ici nous avons utilisé la première syntaxe possible : drawimage(image, x,y) Avec x et y coordonnées du coin supérieur gauche 4.5 LA PAGE NOMMÉE 'IMPORTER_IMAGE2.HTM' APERÇU Canvas de 1000 par 800 L'image est redimensionnée : la largeur et la hauteur sont divisées par deux et cette image réduite est positionnée au centre du canvas LE CODE JS (EXTRAIT) var image = new Image(); image.src = 'tortue.jpg'; var largeur = (image.width) / 2 ; var hauteur = (image.height) / 2 ; var x = var y = contexte.drawimage(image,x,y,largeur,hauteur); COMMENTAIRE Ici nous avons utilisé la deuxième syntaxe possible : drawimage(image, x,y,largeur,hauteur) avec : x et y coordonnées du coin supérieur gauche de l'image largeur et hauteur : dimension de l'image dans le canvas 17 sur 17
.. 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é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é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é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é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étailCercle trigonométrique et mesures d angles
Cercle trigonométrique et mesures d angles I) Le cercle trigonométrique Définition : Le cercle trigonométrique de centre O est un cercle qui a pour rayon 1 et qui est muni d un sens direct : le sens inverse
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étailTp_chemins..doc. Dans la barre "arche 2" couleur claire 1/5 21/01/13
TP de création : utilisation des chemins vectoriels Finis les mauvais rêves : vous aurez enfin votre dreamcatcher (Indienss des Grands Lacs) 1 ) Créez une nouvelle image de 300 pixels sur 600 pixels en
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é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é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é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é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é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étailNFA016 : 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étailwww.imprimermonlivre.com
0 www.imprimermonlivre.com Composition d une couverture avec Word L objectif de ce guide est de vous proposer un mode opératoire pour créer une couverture avec Word. Nous vous rappelons toutefois que Word
Plus en détailLPP SAINT JOSEPH BELFORT MODE OPERATOIRE ACTIVINSPIRE. Bonne utilisation à toutes et tous! UTILISATION DES TBI LE LOGICIEL ACTIVINSPIRE
LPP SAINT JOSEPH BELFORT MODE OPERATOIRE ACTIVINSPIRE Utilisation des TBI UTILISATION DES TBI LE LOGICIEL ACTIVINSPIRE T B utoriel de base, ce mode d emploi a pour objectif de vous présenter les principales
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é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é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é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étailContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
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é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 seul ami de Batman
Le seul ami de Batman Avant de devenir un héros de cinéma en 1989, Batman est depuis plus de 50 ans un fameux personnage de bandes dessinées aux États-Unis. Il fut créé en mai 1939 dans les pages de Détective
Plus en détailDans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
Plus en détailCréation de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
Plus en détailAide GeoGebra. Manuel Officiel 3.2. Markus Hohenwarter et Judith Hohenwarter www.geogebra.org
Aide GeoGebra Manuel Officiel 3.2 Markus Hohenwarter et Judith Hohenwarter www.geogebra.org 1 Aide GeoGebra 3.2 Auteurs Markus Hohenwarter, markus@geogebra.org Judith Hohenwarter, judith@geogebra.org Traduction
Plus en détailVOS PREMIERS PAS AVEC TRACENPOCHE
Vos premiers pas avec TracenPoche page 1/16 VOS PREMIERS PAS AVEC TRACENPOCHE Un coup d'oeil sur l'interface de TracenPoche : La zone de travail comporte un script, une figure, un énoncé, une zone d analyse,
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é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étailTBI et mathématique. Pour vous soutenir dans votre enseignement des mathématiques. Les outils du logiciel Notebook. les ressources internet
TBI et mathématique Pour vous soutenir dans votre enseignement des mathématiques Dessin tiré du site www.recitus.qc.ca Les outils du logiciel Notebook et les ressources internet Document préparé par France
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étailMy Custom Design ver.1.0
My Custom Design ver.1.0 Logiciel de création de données de broderie Mode d emploi Avant d utiliser ce logiciel, veuillez lire attentivement ce mode d emploi pour bien l utiliser correctement. Conservez
Plus en détailUtiliser le logiciel Photofiltre Sommaire
Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner
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étailFête de la science Initiation au traitement des images
Fête de la science Initiation au traitement des images Détection automatique de plaques minéralogiques à partir d'un téléphone portable et atelier propose de créer un programme informatique pour un téléphone
Plus en détailRéalisation de cartes vectorielles avec Word
Réalisation de cartes vectorielles avec Word Vectorisation de la carte Après avoir scanné ou avoir récupéré un fond de carte sur Internet, insérez-la dans votre fichier Word : Commencez par rendre visible
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é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étailDans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.
1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur,
Plus en détailAdobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur
Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur I- Ouverture d une nouvelle feuille de travail Fichier / Nouveau (ou ctrl + N) Indiquer dans la fenêtre qui s ouvre
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étailUtilisation du visualiseur Avermedia
Collèges Numériques Utilisation du visualiseur Avermedia Un visualiseur est aussi appelé caméra de table et ce nom rend mieux compte de sa fonction première à savoir filmer un document (revue,carte, dissection,
Plus en détailDETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran
DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT
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é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é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étailGrille 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
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étailChoisir entre le détourage plume et le détourage par les couches.
Choisir entre le détourage plume et le détourage par les couches. QUEL CHOIX D OUTILS ET QUELLE METHODE, POUR QUEL OBJECTIF? Il existe différentes techniques de détourage. De la plus simple à la plus délicate,
Plus en détailLadibug TM 2.0 Logiciel de présentation visuel d'image Manuel de l utilisateur - Français
Ladibug TM 2.0 Logiciel de présentation visuel d'image Manuel de l utilisateur - Français Table des Matières 1. Introduction... 2 2. Spécifications du Système... 2 3. Installer Ladibug... 3 4. Connexion
Plus en détailNormes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03
version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &
Plus en détailL espace de travail de Photoshop
L espace de travail de Photoshop 1 Au cours de cette leçon, vous apprendrez à : ouvrir les fichiers Photoshop ; sélectionner et employer certains des outils dans le panneau Outils ; définir les options
Plus en détailInfolettre #18 : Les graphiques avec Excel 2010
Infolettre #18 : Les graphiques avec Excel 2010 Table des matières Introduction... 1 Hourra! Le retour du double-clic... 1 Modifier le graphique... 4 Onglet Création... 4 L onglet Disposition... 7 Onglet
Plus en détailPARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer
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é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étailMEMENTO D'UTILISATION Du T.N.I. SmartBoard (Version 10.0.130)
CRDP de l académie de Versailles Mission TICE Médiapôles mediapoles @crdp.ac-versailles.fr MEMENTO D'UTILISATION Du T.N.I. SmartBoard (Version 10.0.130) Mars 2009 584, rue Fourny 78530 Buc Tél. 01 39 45
Plus en détailGIMP. Le traitement d'images libre INSTALLATION SUR WINDOWS
Page 1/9 GIMP Le traitement d'images libre INSTALLATION SUR WINDOWS Logiciel utilisé : Gimp Version : 2.8 Niveau : Débutant Auteur : David VAYSSIERE Licence : Licence GNU / FDL Page 1 sur 11 Sommaire I.
Plus en détailDOSSIER D'ACTIVITES SUR TUXPAINT Dessiner avec Tuxpaint. Objectifs :
DOSSIER D'ACTIVITES SUR TUXPAINT Dessiner avec Tuxpaint Objectifs : Apprendre à l apprenant à connaître l'ordinateur Apprendre à l'apprenant à allumer l'ordinateur Faire découvrir à l'apprenant Linux Faire
Plus en détailFreeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
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étailGéographie CM2. Guide pédagogique. Ressources vidéoprojetables & 14 animations interactives. Jacques Arnaud Nicole Darcy Daniel Le Gal
CM2 Géographie RESSOURCES MULTIMÉDIA Guide pédagogique Atouts es n i l p i c s Di Jacques Arnaud Nicole Darcy Daniel Le Gal Ressources vidéoprojetables & 14 animations interactives Sommaire Présentation
Plus en détailNotre projet est de réaliser un document
Un quatre-pages avec Writer Guy Veyssière Notre projet est de réaliser un document constitué de quatre pages au format A5 sur une feuille de papier au format A4 recto-verso, afin d'obtenir un livret en
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étailCréer une maquette de site Internet
Créer une maquette de site Internet La réalisation d une maquette de site Internet pour un projet nécessite une certaine rigueur, avec le souci du détail. Nous allons voir ici comment utiliser une grille
Plus en détailCours de D.A.O. Mécanique
Cours de D.A.O. Mécanique Institut Sainte-Begge 3ème & 4ème qualification technique Site Cobegge électromécanique QCad, le DAO libre Qcad est un logiciel libre de dessin apte à dresser des plans, tout
Plus en détailPROGRAMME D HABILETÉS EN FAUTEUIL ROULANT (WSP-F)
PROGRAMME D HABILETÉS EN FAUTEUIL ROULANT (WSP-F) LIGNES DIRECTRICES POUR LE PARCOURS À OBSTACLES VERSION 4.1 CANADIENNE-FRANÇAISE Les activités d entraînement et d évaluation du WSP-F 4.1 peuvent se dérouler
Plus en détailHTML5 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
Plus en détailSynoptique des icônes Interwrite Workspace
Synoptique des icônes Interwrite Workspace Elément à privilégier pour déplacer la barre sur l écran. Réduire la barre comme ceci : Mode souris. Pour revenir à une utilisation classique de l ordinateur.
Plus en détailTutoriel : logiciel de présentation Openoffice Impress
Tutoriel : logiciel de présentation Openoffice Impress Le logiciel de présentation permet de construire une suite de pages (diapositives) contenant différents objets : du texte, de l'image, du son. - L'apparition
Plus en détailPrise en main du logiciel. Smart BOARD Notebook 10
Prise en main du logiciel Smart BOARD Notebook 10 1. Introduction : Le logiciel Smart BOARD est utilisable avec les tableaux blancs interactifs de la gamme SMART. Toutefois, il n'est pas nécessaire d'avoir
Plus en détailSPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES
SPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES DIRECTIVES COMMUNE POIDS Display Standard: 70 KB Display «Expandable»: 115 KB Video: 40 MB Video Mobile: 3 MB Performance: 30 KB Mobile: voir page 9
Plus en détailTBI-DIRECT. Bridgit. Pour le partage de votre bureau. Écrit par : TBI Direct. http://www.tbi-direct.fr
TBI-DIRECT Bridgit Pour le partage de votre bureau Écrit par : TBI Direct http://www.tbi-direct.fr Contenu Vue d'ensemble...4 Nom du serveur...5 Lancement du Bridgit...5 Installation du logiciel Bridgit
Plus en détailSupport de formation Notebook
Support de formation Notebook Guide de l utilisateur du tableau interactif SMART Board Table des matières Le Tableau Blanc Interactif... 1 Comprendre le fonctionnement du TBI... 1 Utiliser le plumier
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étailNote de cours. Introduction à Excel 2007
Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier
Plus en détailMaîtriser les fonctionnalités d un traitement de texte (Word OpenOffice)
Utilisation de l'ordinateur et apport des TIC en enseignement (1NP) Module 03 Maîtriser les fonctionnalités d un traitement de texte. Sens du Module De nombreux documents remis aux enfants sont réalisés
Plus en détailFrontPage Support d apprentissage septembre 2000
FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des
Plus en détailUN 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
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étailPrêt(e) pour le CE1. Tu es maintenant au CE1. Avant de commencer les leçons, nous allons réviser avec toi!
Jour Prêt(e) pour le CE Tu es maintenant au CE. vant de commencer les leçons, nous allons réviser avec toi! Géométrie Retrouver un itinéraire en tenant compte des informations. Lis les explications de
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étailCours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
Plus en détailPlus petit, plus grand, ranger et comparer
Unité 11 Plus petit, plus grand, ranger et comparer Combien y a-t-il de boules sur la tige A? Sur la tige B? A B Le nombre de boules sur la tige A est plus grand que sur la tige B. On écrit : > 2 On lit
Plus en détailJean Dubuffet AUTOPORTRAIT II - 1966
Jean Dubuffet AUTOPORTRAIT II - 1966 MON VISAGE A LA MANIERE DE JEAN DUBUFFET OBJECTIFS - utiliser son expérience sensorielle visuelle pour produire une œuvre picturale. - réaliser une œuvre s'inspirant
Plus en détailDessiner dans Galaad FRANÇOIS PALLUT
Dessiner dans Galaad FRANÇOIS PALLUT Paternité - Pas d'utilisation Commerciale - Pas de Modification : http://creativecommons.org/licenses/by-nc-nd/2.0/fr/ Table des matières Objectifs 5 Introduction 7
Plus en détailLe plombier chauffagiste a aussi besoin de cette représentation pour savoir ce qu il y a à l intérieur de la maison au niveau des hauteurs.
Les informations du plan Vous connaissez trois types de représentation d un pavillon : 1 : La perspective 2 : Les façades (page 2 ) 3 : La vue en plan (page 3) Observer attentivement la vue de la page
Plus en détailResponsive 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
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étailComment utiliser le logiciel Interwrite Workspace?
Comment utiliser le logiciel Interwrite Workspace? La barre d outils par défaut Après avoir lancer le logiciel Interwrite Workspace en mode interactif, la barre d outils ci-dessous apparaît : Réduire la
Plus en détail2013 Pearson France Adobe Illustrator CC Adobe Press
Au cours de cette démonstration d Adobe Illustrator CC, vous découvrirez les nouvelles fonctionnalités du logiciel, comme les outils de retouche et la sélection du texte, ainsi que d autres aspects fondamentaux
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étail