Création d un Site WEB

Transcription

1 RAPPORT DE STAGE DE L INFORMATIQUE POUR L INGÉNIEUR Création d un Site WEB Réalisé par : Badie SAADA Med Amine BAATOUT Surveillé par : Mme Syrine CHARFI Mme Sonia ALOUANE 25 septembre 2013

2 Table des matières Introduction Présentation du sujet Conception Plan de site Plan des pages Réalisation et résultats Conclusion Annexe Code HTML Code CSS Références

3 Introduction Dans le but d avoir une formation dans des techniques importantes pour l ingénieur tel que la création d un site WEB en utilisant les langages HTML et CSS, et la création d un rapport au format PDF en utilisant LATEX, les étudiants en première année Techniques Avancées débutent leur année universitaire par un stage d une semaine intitulé "Stage d Informatique pour l Ingénieur" encadré par la collaboration de Mme Sonia Alouane et Mme Syrine Charfi. Au cours de ce stage, les étudiants apprennent les techniques nécessaires pour la création d un Site WEB au choix, et dont ils sont censés de le présenter dans une soutenance tenue à l ENIT. Dans ce cadre nous avons choisi un sujet qui touche notre formation d ingénieur : DIY (qui est l acronyme de "Do It Yourself", ce terme sera défini dans le chapitre qui suit). FIGURE 1 L art De DIY Dans ce rapport on détaillera le plan du site, sa conception, sa réalisation et les références dont on a eu recours. 2

4 Présentation du sujet A fin de créer un site utile et vu l importance de l esprit créatif pour un ingénieur, on a choisi de créer un site qui donne des tutoriels (démarches) de quelques projets simples en électronique et en robotique. Ce site est intitulé "L art de DIY" DIY ou "Do It Yourself" est un terme anglais dont la traduction littérale en français serait «Faites-le vous-même», «Faites-le par vous-même» ou «Fais-le toi-même». Commençons par définir le DIY : Le DIY désigne désigne à la fois : certains musiciens ou mouvements culturels. des activités visant à créer des objets de la vie courante, des objets technologiques ou des objets artistiques, généralement de façon artisanale. La croissance des ressources de DIY en ligne est en forte progression, et le nombre de propriétaires ayant un blog à propos de leur propre expérience ne cesse de croître de même que les sites web DIY d organisations. Pour notre site, on est intéressé par tout ce qui est petits projets en électronique comme des mini robots. Mais ce travail nécessite une connaissance en matièrerde programmer un micro processeur, qui nécessite l achat d un outil électrique qui est le "programmateur". Mais avec le progrès de "l open source" il suffit d acheter une carte électronique ARDUINO (ou autre) et la programmer facilement grâce à son programmateur intégré, nécessitant alors qu une simple connexion USB. Le seul problème (qui ne l est pas vraiment) c est d apprendre le langage de programmation Arduino qui est basé sur les langages "C++" et "Processing". Remarque : Parmi les deux projets qu on a décrit dans le site, un a été fait par Mohamed Amine BAATOUT. FIGURE 2 Distributeur d Arduino en Tunisie 3

5 Conception Plan du site Le site se compose de six pages html : Quatre pages principales : 1. Accueil 2. Projets 3. À propos de nous 4. Contactez nous Deux pages secondaires : 1. BTT - Clavier MIDI 2. Music LED Light Box Plan des pages Toutes les pages ont la même structure et la même forme : Chaque page est divisée en 4 divisions principales : HEADER est l entête qui comporte une image décrivant l esprit divertissant du site et une barre de menu contenant les noms des pages. RIGHTPANEL est la section verticale à droite où on a intégrer un lecteur MP3, des liens, une liste des projets,des espaces publicitaires et un logo du distributeur d Arduino en Tunisie. LEFTPANEL est la section droite comportant le contenu de chaque page. FOOTER est la division consacrée uniquement pour les droits d auteur. Prenons maintenant chaque page à part! 4

6 1. Accueil : contient les définitions des termes à connaitre pour comprendre les étapes de la réalisation des projets : FIGURE 3 Accueil 5

7 2. Projets : contient les tutoriels de deux projets qu on a choisi : "BTT - Clavier MIDI" et "Music LED Light Box". Pour chaque projet il y a un lien vers une autre page contenant les étapes de costruction. FIGURE 4 Tutoriels des Projets 3. À propos de nous : comme son nom l indique, elle contient des informations sur les réalisateurs du site et une idée du cursus ENIT ENSTA. FIGURE 5 A propos de nous 6

8 4. Contactez nous : contient les moyens pour nous contacter. FIGURE 6 Contactez nous 5. BTT - Clavier MIDI : contient le tutoriel pour réaliser le BTT - Clavier MIDI. FIGURE 7 BTT - Clavier MIDI 7

9 6. Music LED Light Box : contient le tutoriel pour réaliser Music LED Light Box. FIGURE 8 Music LED Light Box 8

10 Réalisation et résultats La réalisation de ce site WEB n était pas une tache facile. Son processus a pris de nombreuses heures de travail. Dans un premier temps, les séances d SII nous ont permis de faire un grand pas dans la compréhension des langages HTML et CSS. Après quelques séances, on a parvenu à faire un site présenté dans la figure ci dessous : FIGURE 9 Essai Mais, ce n était pas vraiment très très beau! Mais après un peu recherches sur Internet et la consultation des codes sources de quelques pages statiques, on a réussi à comprendre l organisation d une bonne page HTML et le rôle essentiel des divisions dont on en parlera par la suite. Dans un premier temps, on a commencé par prendre l entête décrite dans le manuel d SII avec quelques changement pour la compatibilité avec les lettres accentuées : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 9

11 <html xmlns=" <head> <title>l art de DIY - Accueil</title> <link href="css/style.css" rel="stylesheet" type="text/css"> Ensuite on essayé les différentes instructions pour changer le style du texte comme (<h1> <h2>...) et ça a donné ce premier résultat : Mais après faire la liai- FIGURE 10 Sans CSS son avec le fameux CSS, on a parvenu à changer les polices d écritures et utiliser n importe quel couleur avec le code de 6 chiffres (exemple : #f1f1f1) FIGURE 11 Après CSS 10

12 Mais le vrai changement, était avec l application des Divisions : On a diviser chaque page en parties organisées de la façon suivante : MAIN PAGE HEADER HEADER-IMAGE MENU CONTENT LEFT-PANEL RIGHT-PANEL FOOTER 11

13 Grâce à cette organisation, on est passé de ce qui a été présenté par la Figure 12, à ce qui suit. FIGURE 12 L ajout des divisions MAIN + PAGE + HEADER FIGURE 13 L ajout de MENU 12

14 FIGURE 14 L ajout de RIGHTPANEL et LEFTPANEL FIGURE 15 Finition 13

15 FIGURE 16 Schéma récapitulatif pour plus d éclaircissement Evidemment, un site WEB est loin d être fini sans l utilisation des commandes de style CSS. Pour cela on a écrit le code CSS présent dans la partie Annexe. Enfin, pour plus de style, on a utilisé la balise MARQUEE, mais vu que ce n était pas si attirant que ça et vu qu on n a pas le droit d utiliser le JAVA Script, la balise iframe était notre sauveur, ou encore "la cerise sur le gâteau". Il s agit de consacrer une partie (ou rectangle) de proportions bien définies (Height et Width) de la page HTML, où on peut mettre presque n importe quel objet. On l a utilisé pour : Intégrer des diaporamas que nous avons faits nous même en ligne. (online) Intégrer un lecteur MP3 que nous avons fait le design avec un outil spécial (PODSNACK) Intégrer un outil de sondage. (Afin d avoir un avis sur les articles) Intégrer des vidéos de Youtube (on a aussi integré des videos à partir du disque dur grâce à la balise VIDEO qui a le même principe que IMAGE) 14

16 Avant d entamer cette partie, on doit signaler qu on a rencontré un problème qui concerne les petite différences du style entre les pages HTML (comme par exemple le menu qui doit se colorer en jaune lorsqu on est sur la page correspondante). Donc pour ne pas avoir à chaque page HTML sa feuille de style CSS, on a pris tout le contenu en commun et on l a mis dans un seul fichier intitulé style.css, et pour les différence on a du intégrer une partie du code CSS dans le HEAD du code HTML. Voilà un exemple du code CSS imbriqué dans le code HTML : <head> <title> L art de DIY - Accueil</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <style type="text/css">.menu { background-image: url(./images/index.jpg); width: 800px; height: 51px; float: left; </style> </head> 15

17 Conclusion Pour conclure, nous avons réussi à réaliser notre site web statique, chose qui s est avérée plus simple que nous le croyions auparavant, et ce, grâce à ce stage d informatique très instructif et à l encadrement de nos deux professeurs Mme Sonia Alouane et Mme Syrine Charfi que nous remercions encore pour les efforts qu elles ont faits pour nous encadrer et nous expliquer ce qui nous paraissait incompréhensible. 16

18 Annexe Code HTML FIGURE 17 Les balises utilisées 17

19 Code CSS body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; background-color: #cecece; margin: 80px; h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea { padding: 0px; margin: 0px;.main { width: 840px; margin: 0px auto;.page { background-color: #FFFFFF; width: 800px; float: left; padding: 20px;.header { width: 800px; float: left;.header-img { background-image: url(../images/header.jpg); background-repeat: no-repeat; background-position: left top; width: 800px; height: 249px; float: left;.color { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #dc004b; text-decoration: none;.menu ul { list-style-type: none;.menu ul li { display: inline; 18

20 .menu ul li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 51px; color: #19c1de; text-decoration: none; padding-right: 45px; padding-left: 45px;.content { width: 800px; float: left; padding-top: 12px;.left-panel { width: 480px; float: left; padding: 30px 50px 20px 20px;.left-panel-in { text-align: justify; clear: both;.left-panel-in h1 { color: #666699;.left-panel-in h2 a { text-decoration: none; color: #19c1de;.left-panel-in p { text-align: justify; clear: both; font-size: 20px;.right-panel { padding-top: 42px; width: 250px; float: right;.right-panel-in { clear: both;.right-panel-in h3 { font-size: 20px; font-weight: normal; color: #346397; margin-top: 25px; margin-bottom: 17px; margin-left: 3px; 19

21 .right-panel-in ul { list-style-type: none;.right-panel-in ul li { padding-top: 8px; padding-bottom: 8px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #CCCCCC;.right-panel-in ul li a { color: #003366;.right-panel-in ul li a:hover { text-decoration: underline;.footer { background-image: url(../images/f.jpg); width: 800px; height: 50px; float: left; background-repeat: no-repeat; background-position: left top; margin-top: 25px; 20

22 Bibliographie [REF] Manuel de l SII. 1ATA, [REF] http ://en.wikipedia.org/wiki/arduino. [REF] http :// [REF] http :// [REF] http ://en.wikipedia.org/wiki/arduino. [REF] http ://en.wikipedia.org/wiki/doityourself. [REF] http ://en.wikipedia.org/wiki/arduino. 21