Laboratoire de technique informatique Rapport n° 2

TEKAM KAMDEM ANDRE
DEVOS PIERRE
2 IRT
Groupe 2
Laboratoire de technique informatique
Rapport n° 2 :
Site Web, Animation Flash et projet USB
Professeur : D. Pourbaix
Remarque(s):__________________________________
_____________________________________________
_____________________________________________
____________________________________________
Graduat en informatique industrielle
Année 2007-2008
1
Table des matières
Site Web....................................................................................................................................................................3
A. Cahier des charges............................................................................................................................................3
B. Structure............................................................................................................................................................3
C. Code..................................................................................................................................................................4
1. Style.css.........................................................................................................................................................4
2. Modele.html..................................................................................................................................................7
D. Logiciels utilisés...............................................................................................................................................8
E. Conclusion........................................................................................................................................................8
Flash..........................................................................................................................................................................9
A. Cahier des charges............................................................................................................................................9
B. Méthôde............................................................................................................................................................9
1. Interpolation de mouvement..........................................................................................................................9
2. Interpolation de forme.................................................................................................................................10
C. Conclusion......................................................................................................................................................11
D. Les clips..........................................................................................................................................................11
Projet USB...............................................................................................................................................................12
A. Présentation....................................................................................................................................................12
B. Materiel...........................................................................................................................................................12
C. Fonctionnement..............................................................................................................................................12
1. Fonctionnement général..............................................................................................................................12
2. Interface.......................................................................................................................................................13
D. Algorithme du compteur................................................................................................................................14
Explications :...................................................................................................................................................14
E. Code................................................................................................................................................................15
2
Site Web
A. Cahier des charges
Réaliser un site Web HTML avec CSS.
Contenu : menu, Curriculum Vitae, animation flash, lien vers
fichiers, images, javascript, explications sur de la
programmation et présentation du projet USB.
B. Structure
http://home.tele2.be/elwood/
Ce site est structuré grâce à un fichier .CSS (Cascading Style
Sheets: feuilles de style en cascade).
Le fichier CSS établit une «structure de formatage» reflétant
l'arbre logique du document.
Les propriétés sont regroupées par blocs de règles, délimités
par les accolades {}.
Ainsi, dans ce fichier, on définit l'aspect général du site,
du menu par le style de police, de couleur etc..
On peut aussi y incorporer une image récurrente, des arrièreplans etc...
On doit appeler le fichier CSS sur chaque page en plaçant
cette ligne dans entre les balises <head> et </head>.
<link rel=stylesheet type="text/css" href="style.css">
Le code des pages html et css a été modifié avec Notepad++ qui
rend le code plus lisible grâce à un jeu de couleur pour les
balises.
Les différentes images de fond ont été créées avec Macromedia
Fireworks Mx et sauvegardées au format PNG qui permet une
modification ultérieure plus facile.
3
C. Code
1. Style.css
*{
margin: 0;
padding: 0;
}
body {
background: #DFDBD3 url(images/bg.gif) top left repeat-x;
color: #4C4C4C;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
p{
font-size: .8em;
line-height: 2em;
}
h3 {
font-size: .7em;
font-weight: bold;
line-height: 1.3em;
padding-top: 2.5em;
}
a:link,
a:visited {
background: #FFFFFF;
color: #3333FF;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
background: #3333FF;
color: #FFF;
}
#container {
background: transparent url(images/contbg.gif) top left repeat-y;
width: 700px;
}
#intro,
#text {
padding: 0 69px 0 86px;
width: 600px;
}
#intro {
background: transparent url(images/logo.png) top left no-repeat;
4
padding-top: 230px;
}
#text h3,
#text p {
padding-left: 10px;
padding-right: 40px;
}
#contenu
{
border-bottom: 1px solid #E4E1DB;
padding-bottom: 20pt;
}
#contact .p1
{
padding: 40px 40px 0 30px;
}
#contact .p2
{
padding: 60px 40px 0 30px;
}
#contact .p2,
#contact .p1
{
background: transparent url(images/contact.png) top left no-repeat;
font-size: .6em;
font-weight: bold;
left: 661px;
display: block;
line-height: 1.4em;
position: absolute;
top: 160px;
width: 141px;
z-index: 20;
}
#contact .p2 a:link,
#contact .p2 a:visited {
background: transparent;
color: #E6E3DE;
text-decoration: none;
}
#contact h3 {
font-size: .9em;
}
#linkList {
background: transparent url(images/navbg.gif) top left repeat-y;
left: 661px;
padding-top: 10em;
position: absolute;
top: 130px;
width: 285px;
z-index: 10;
}
5
#linkList2 {
background: transparent url(images/navbtmbg.gif) bottom left no-repeat;
font: .7em/1.4em verdana, sans-serif;
padding-bottom: 160px;
}
#linkList2 h3 {
background: transparent top left no-repeat;
display: block;
height: 26px;
padding: 0 0 10px 0;
width: 285px;
}
#linkList2 .page {
background-image: url(images/page.png);
}
#linkList2 .download {
background-image: url(images/download.png);
}
#linkList2 ul {
list-style-type: none;
padding: 0 75px 25px 15px;
}
#linkList2 li {
color: #E6E3DE;
padding: 6px 10px;
}
#linkList2 a:link,
#linkList2 a:visited {
background: transparent;
color: #4C4C4C;
font-weight: bold;
}
#contact .p2 a:hover,
#contact .p2 a:active,
#contact .p2 a:focus,
#linkList2 a:hover,
#linkList2 a:active,
#linkList2 a:focus,
{
background: #3333FF;
color: #FFF;
text-decoration: none;
}
#lselect li,
#ldownload li
{
background: transparent url(images/navico.gif) 3pt 5pt no-repeat;
border-bottom: 1px solid #CFCCC4;
6
padding: 7px 10px 7px 30px;
}
2. Modele.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Devos Pierre" />
<meta name="keywords" content="css, isims, devos, pierre" />
<meta name="description" content="Site Web réalisé dans le cadre du cours de LTIN 2007-2008" />
<title></title>
<script type="text/javascript"></script>
<style type="text/css" title="currentStyle" media="screen">
@import "style.css";
</style>
</head>
<body>
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span></span></h1>
<h2><span></span></h2>
</div>
<div id="contact">
<h3><span>nom page</span></h3>
<p class="p1"><span>Me contacter : </span></p>
<p class="p2"><span><a
href="mailto:[email protected]">[email protected]</a></span></p>
</div>
</div>
<div id="text">
<div id="contenu">
<h3><span></span></h3>
<p class="p1"><span></span></p>
<p class="p2"><span></span></p>
</div>
7
</div>
<div id="linkList">
<div id="linkList2">
<div id="lselect">
<h3 class="page"></h3>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="cv.html">Curriculum Vitae</a></li>
<li><a href="prog.html">Programmation</a></li>
<li><a href="projet.html">Projet USB Delphi</a></li>
<li><a href="flash.html">Animation Flash</a></li>
</ul>
</div>
<div id="ldownload">
<h3 class="download"></h3>
<ul>
<li><a href="style.css">Télécharger le blabla</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
D. Logiciels utilisés
−
Macromedia Fireworks MX (images)
−
Notepad+ (code)
−
Filezila (upload)
−
internet explorer, mozilla firefox (test)
E. Conclusion
Le plus dificile fut le positionnement des éléments avec le
padding. Ce site est approuvé par W3C Markup Validation
Service comme étant parfaitement valide XHTML 1.0 et CSS niveau
2.1.
8
Flash
A. Cahier des charges
Réaliser dans des animations Flash, des interpolations de
mouvement et de forme.
B. Méthôde
1. Interpolation de mouvement
L'interpolation de mouvement est une méthode qui permet de
déplacer une image sans devoir utiliser la méthode «images par
images».
1 : Créez une image quelconque, et Copiez-la. Allez ensuite
plus loin dans le temps comme l’image 10 par exemple.
Appuyez sur F6 (touche raccourci) pour créer une nouvelle
image clé. Votre barre d'animation change :
2 : Sur l'image 10, déplacez la forme vers un autre endroit de
la page.
3 : Cliquez sur une des images entre la 1ère et la 9ème image,
puis choisissez "créer une interpolation de mouvement" dans le
menu qui vient de s'ouvrir. La barre d’animation change.
Les images interpolées ont une flèche et sont de couleur
violette. A noter que si l'interpolation est impossible, ou
ratée, le trait qui constitue la flèche est discontinu.
9
2. Interpolation de forme
Cette interpolation s'applique à peu près de la même manière
que l'interpolation de mouvement. Celle-ci permet par exemple
de changer un rond en carré durant une interpolation de
mouvement, ou encore de changer la couleur de la forme dans un
laps de temps.
1 : Créez une image quelconque.
2 : Cliquez sur l'image 10 et appuyez sur F7 (touche
raccourci) pour créer une nouvelle image clé vide. Puis
dessinez-y un carré au même endroit ou à un autre endroit que
la forme de l’image 1.
3 : Cliquez sur une des images entre la 1 et la 9. Allez dans
la fenêtre image et dans le sélecteur d'interpolation,
choisissez «forme». Votre barre doit alors ressembler à cela :
Vous remarquez que la représentation sur la barre de temps est
la même que pour l'interpolation de mouvement à la couleur
près. Ici, la couleur est verte.
10
C. Conclusion
Il faut savoir que pour créer une interpolation de forme, il
faut séparer la forme (ctrl+b), sans quoi on risque d’avoir
des pointillés à la place d’une flèche continue et rendre
l’interpolation impossible. Quand la forme ne doit pas varier
au cours du temps, il faut « grouper » l'objet.
D. Les clips
L’utilisation de clips est très utile pour ne pas
s’embrouiller lorsque l’on doit réaliser de longues animations
consécutives.
Pour ajouter un clip la touche de raccourci est CTRL+f8.
On peut comme cela créer plusieurs clips commençant chacun à
l’image 0 mais qui pourront s’enchaîner grâce à un peu
d’action script.
11
Projet USB
A. Présentation
Il s'agit d'un projet consistant à étudier le fonctionnement
des entrées et sorties du port USB à l'aide d'une plaquette
Velleman K8055.Le programme a été réalisé avec Delphi.
B. Materiel
1 moteur rotatif à courant continu
1 capteur de compteur pour vélo
1 aimant
1 Compact Disc
1 plaquette Velleman K8055
1 ordinateur avec port USB disponible
C. Fonctionnement
1. Fonctionnement général
Les entrées de la plaquette vont permettre de recueillir les
données sur le compteur.
Les sorties vont permettre d'alimenter le moteur.
- Le moteur est connecté entre une des sorties analogiques
(PWM1 ou PMW2) et une des sources de tension interne +5v (SK2
ou SK3).
- Le compteur est connecté entre une des entrées numériques et
la masse (I1 et GND)
Une fois alimenté suffisamment, le moteur fait tourner le
disque; à chaque tour de l'aimant fixé sur le disque,
le compteur reçoit une impulsion que l'on peut recueillir sur
une entrée digitale de la plaquette K8055.
Ensuite, on peut calculer le nombre de tours-minutes.
12
2. Interface
Avec cette interface, on peut rendre la carte active via un
bouton «Connect» et quitter le programme par un bouton «Exit».
On peut augmenter la tension fournie au moteur par un
trackbar.
Il faut fournir un certain nombre de Volt avant que le moteur
ne se mette à tourner.
L'action sur ce trackbar a pour effet d'afficher dans des
labels la tension fournie ainsi que son équivalent en bit.
L'affichage central montre la vitesse en tours par minutes.
Un edit montre le nombre de tours effectué au total, cette
affichage peut être remis à zéro par un bouton reset.
Une label s'affiche dans le bas de l'interface pour avertir
l'utilisateur quand la tension demandée devient trop
importante et rend le montage instable malgrè les contrepoids.
Enfin, un menu «à propos» affiche des informations dans une
label, la tension est remise à zéro lors de l'affichage de
celle-ci.
13
D. Algorithme du compteur
Explications :
−
L'intervalle du timer est fixé à 10ms.
−
La variable time s'incrémente donc de 1 toutes
les 10ms.
−
On va vérifier la valeur de l'entrée digitale et
la placer dans une variable C1 (boolean).
−
A chaque changement d'état de l'entrée,
variable pulse s'incrémente de 1.
−
Quand la variable time a atteint 500
la
(donc 5 secondes).
−
On transfert la variable "pulse" dans une autre,
"trm".
−
Ensuite, on multiplie cette valeur par 12 pour
avoir une projection sur 1 minute.
− On affiche la valeur de trm dans la label des
tours/minute.
14
E. Code
private
{ Déclarations privées }
k: longint;
c0,c1: boolean;
pulse,time,trm: integer;
public
{ Déclarations publiques }
end;
var
Form1: TForm1;
implementation
procedure TForm1.connectClick(Sender: TObject);
begin
k:= OpenDevice(0);
clearanalogchannel(1);
setanalogchannel (1);
resetcounter (1);
setcounterdebouncetime (1,2);
case k of
0: label1.caption:='Card connected';
-1: label1.caption:='Card not found';
end;
ClearAllAnalog;
if k = 0 then trackbar1.enabled := true;
end;
procedure TForm1.Timer1Timer(Sender: TObject);
begin
time:=time+1;
Edit1.text:=inttostr(ReadCounter(1));
c1:=ReadDigitalChannel(1);
if c1=true then
if c0=false then pulse:=pulse+1;
if time=1000 then {toutes les 10 sec}
begin
trm:=pulse;
trm:= trm*6; {* 6 pour avoir une moyenne sur une minute}
label4.caption:=inttostr(trm);
pulse:=0;
time:=0;
15
end;
end;
procedure TForm1.ExitClick(Sender: TObject);
begin
outputanalogchannel (1,0);
CloseDevice;
close;
end;
procedure TForm1.resetClick(Sender: TObject);
begin
resetcounter (1);
end;
procedure TForm1.TrackBar1Change(Sender: TObject);
begin
OutputAnalogChannel(1,0 + TrackBar1.position);
Label7.caption:=inttostr(0 + TrackBar1.position);
if TrackBar1.position >= 200 then label3.visible:= true;
if TrackBar1.position < 200 then label3.visible:= false;
label11.caption := floattostr((trackbar1.position /255)* 5);
end;
procedure TForm1.Apropos1Click(Sender: TObject);
begin
panel2.Visible := true;
trackbar1.Position := 0;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
panel2.Visible := false;
TrackBar1.position:=0;
resetcounter (1);
end;
procedure TForm1.Panel2Click(Sender: TObject);
begin
panel2.Visible := false;
end;
end.
16