LE DATA BOOK INFORMATIQUE

Titre de la leçon : Création des boutons.

OBJECTIFS PEDAGOGIQUES :

A la fin de cette leçon, l’élève sera capable de :

• 
  

• Faire des effets sur les boutons

• 
  

• Créer des animations pour les pages web

• 
  

• Créer des logos et objets de décors

• Dessiner un diagramme de navigation du site web

• •  Créer des boutons pour les pages web

  • Insérer ces boutons dans les pages web
  • Définir : bouton , infographie
    
  
  

INTRODUCTION

Afficher des textes et importer des fichiers image ou son ne suffisent pas pour bien réaliser ses pages web. Il est vital que les pages web soient accueillantes et joviales. Pour cela, il faudra faire appel à l’infographie.

1. Définitions : infographie et bouton.

1. infographie

L’infographie est une application de l’informatique destinée à la représentation graphique et au traitement de l’image à l’aide d’outils de dessin spécifiques.

2. Bouton.

Un bouton est un élément (appartenant à une interface graphique) servant d’interrupteur à l’utilisateur pour déclencher une action. Exemples :

• « OK »  pour valider un choix

• « Annuler » pour éviter de déclencher une action in désirée

• « Connexion » pour se connecter à son compte Yahoo ou Face book.

2. Présentation du concept d’infographie.

1. Historique.

Ce concept apparait en langue française vers les années 1970 désignant uniquement les graphismes (manières de tracer une ligne, de dessiner). Dès 1978, l’infographie devient une discipline majeure par sa présence dans des domaines d’activités tels que : la médecine, la télévision, le cinéma, les disciplines scientifiques, la gestion… . Au début des années 1990, les nouveaux artistes numériques se sont appropriés le terme d’infographiste alors réservé aux ingénieurs concepteurs qui mettaient sur pied les outils techniques pour le traitement d’images.

2. Pratique.

L’infographiste ou infographe est la personne qui maîtrise le travail de l’image (2D, 3D, Web, PAO (publication assistée par ordinateur : cartes de visites, billets d’invitation, cartes de vœux, …)). C’est un spécialiste de l’image et de l’informatique.

Pour être un infographe il faut :

• Soit être passionné par les images

• Soit faire une formation par le biais d’écoles spécialisées dans l’infographie.

3. Disciplines.

1. Infographie 2D.

Elle traite des images en 2 dimensions c'est-à-dire visible sur un plan (x, y). Exemple : dessins, cartes, diagrammes, photos.

2. Infographie 3D.

Elle consiste représenter un environnement ou une personne réelle de manière virtuel : une salle de classe, un stade de football, Samuel Eto’o dans Fifa 12.

3. Synthèse des images.

Elle consiste en la création assistée par ordinateur d’images numériques (images de synthèse). Le but ici est de faire du photoréalisme (rendu photo réaliste) c'est-à-dire de réussir au mieux le trucage (Small Ville, Spiderman, Matrix).

3. Un logiciel d’infographie : Photoshop.

C’est un logiciel approprié à la retouche et création d’images en deux dimensions (dessins, photos, cartes, animations web,…). C’est de l’infographie 2D.

Comme tout logiciel, L’interface graphique (ensemble d’éléments graphiques (boutons, images,…) permettant la communication entre des systèmes différents) de Photoshop est constituée :

• D’une barre de Menu (permettant la création d’un espace de travail, l’importation de fichiers images, le traitement d’images)

• D’un espace ou zone de travail

• D’une fenêtre d’outils (située le plus souvent à la gauche de la zone de travail)

• D’une fenêtre de calques (située à droite).

4. Création de boutons pour les pages web avec Photoshop.

Avant ça nous parlerons d’abord de la notion de ‘calque’. Un calque est une feuille de la zone de travail ne pouvant contenir qu’un seul type d’information (une photo, une couleur, un texte, une forme géométrique). Les calques sont superposés les uns aux autres par rapport à un ordre de priorité.

Etape 1 :

• Lancez Photoshop CS3/CS4/CS5.

• FichierNouveau (pour la création d’une nouvelle zone de travail)

• Dans le champ ‘Nom :’ remplacez « Sans Titre » par « boutonweb »

• En dessous, modifiez les champs ‘largeur :’ et ‘hauteur :’ par [300 et 100]. Rassurez-vous que l’unité de mesure soit « Pixels ». Ensuite cliquez sur « OK ».

Etape 2 :

• allez à la fenêtre d’outils, taper sur la touche ‘U’ du clavier et observer l’icône activé. Faire un clic droit dessus et choisir « outil rectangle arrondi ».

• Tracez le rectangle dans l’espace de travail.

• Dans la fenêtre ‘calques’, le calque du rectangle est nommé « Forme 1 ». Cliquez droit dessus et choisir « Options de fusions… »

• Dans la zone ‘Styles’, cochez la case « Incrustation en dégradé ». vous pouvez ensuite cochez les autres cases pour voir les différents effets possibles.

• Cliquez « OK » et voilà votre premier bouton crée.

Etape 3 :

• Cliquez droit sur « Forme 1 » et choisissez ‘dupliquer le calque…’, vous obtenez un nouveau calque nommé « Forme 1 copie »

• En dessous de ce calque double cliquez sur l’effet « Incrustation en dégradé » et changez de couleur au niveau du champ ‘dégradé’

• Séquence1 : FichierEnregistrer sousdans cette fenêtre ‘Enregistrez sous’, remplissez les champs tels que’ nom : bouton 1’ ; ‘Format : PNG’ ;

• Désactiver le calque copié en décochant l’œil à gauche de son nom. Sélectionner le calque « Forme 1 » et refaites la séquence 1 avec pour nom « bouton » et Format : PNG.

(Pourquoi enregistrer en PNG au lieu de JPEG ?)

5. Ajout des Effets au Bouton.

Cet ajout se fait par le biais des éditeurs de texte tel que Note Pad++ 5.0. Les effets ici désignent les apparences que prendront les boutons : à l’état normal, au survol de la souris et au clic.

• Lancez Note Pad++.

• Entrez le code suivant :

<!--

#bouton{/* à l’état normal*/

display:block;

width:300px;

line-height:100px;

text-align:center;

vertical-align:middle;

background:url(bouton.png) no-repeat;/*importer l’image*/

color:white;/*couleur du texte*/

text-decoration:none;

font-family:arial;/*police*/

}

#bouton:hover{/*au survol*/

background:url(bouton 1.png) no-repeat;

}

#bouton:active{/* au clic*/

background:url(bouton 2.png) no-repeat; (il suffit d’aller sur Photoshop, dupliquer un calque, taper sur la touche ‘M’ du clavier, faire un clic droit sur l’image du nouveau calque et choisissez “Transformation manuelle” ; diminuer légèrement les dimensions et enregistrer sous bouton 2.png)

-->

• Enregistrer le fichier sous « bouton.css »

N.B : les images et les fichiers css doivent être dans le même répertoire que la ou les pages web du site.

6. Insertion du bouton dans une page web.

Code :

<HEAD><TITLE>premier HTML</TITLE>

<link rel="stylesheet" href="bouton.css"</HEAD>

Dans le body (<BODY>…</BODY>)

Code:

<div id="bouton" style="text/css">

<a href="#">libellé du bouton</a>

</div>

7. Création d’une animation pour le web.

• Lancer Photoshop

• Créer un nouveau fichier (FichierNouveau…) tel que nom :animation ; largeur :400px ; hauteur :300px .

• Taper la touche ‘G’ du clavier et faire un clic droit sur l’icône en surbrillance de la fenêtre d’outils pour choisir ‘outil pot de peinture’.

• Dans la fenêtre couleur (au dessus de la fenêtre des calques), choisir une couleur et colorier l’espace de travail.

• Créer un nouveau calque (CalqueNouveaucalque…) et colorier d’une autre couleur

• Créer deux autres calques avec differentes couleurs.

• Afficher la fenêtre d’animation (FenêtresAnimation). La fenêtre obtenue doit être intitulé « Animation (images) ». Si c’est pas le cas cliquer sur un bouton rectangulaire au coin droit en bas.

• Désactiver tous les calques (en décochant l’œil de chacun)

• Pour la premiere image de la table d’animation, activer un calque de votre choix. En dessous de cette image est écrit ‘0s’. cliquer sur le triangle associé et choisir ‘2s’.

• En dessous de l’image d’animation, remarquer le libellé ‘Toujours’ et à sa droite des outils d’animation. Créer une nouvelle image d’animtion en cliquuant sur l’outil en forme de feuille, juste à côté de l’outil corbeille.

• Désactiver le calque précédent et activer un autre. Faire de même pour les 2 autres calques.

• Cliquer sur l’icône ‘play’ pour la lecture de l’animation (la lecture est illimitée en temps à cause du libellé ‘Toujours’).

• Enregistrer l’animation en .Gif (FichierEnregistrer popur le web et les périphériques). Voilà la première animation créée.