Samuel Delacre 37 rue Henri Barbusse 59750 Feignies samuel.d@free.

fr

CONSUTECH 255 rue de Pont de Pierre 59600 Maubeuge consutech@consutech.fr

UNIVERSIT DE VALENCIENNES ET DU HAINAUT CAMBRSIS IUT INFORMATIQUE ET GNIE INFORMATIQUE ANTENNE DE MAUBEUGE 2005

RAPPORT DE STAGE 2 me anne WEB DEVELOPMENT/DESIGN CONSUTECH.FR

Matre de stage : Mr Thierry BERTRAND Tuteur de stage : Mr Robert CROCFER

Table des matires

PRSENTATION GNRALE DU STAGE___________________________________________4 PRSENTATION DE LENTREPRISE ____________________________________________________5 SUJET & CAHIER DES CHARGES _____________________________________________________5 LE DVELOPPEMENT ____________________________________________________________8 CHOIX DU TYPE DE PROGRAMMATION WEB ____________________________________________9 POURQUOI CHOISIR LES NORMES W3C ? _________________________________________________9 EXPLICATIONS _____________________________________________________________________9 LIMITES ACTUELLES ________________________________________________________________10 PREMIERS PAS _________________________________________________________________11 LES TUTORIAUX ___________________________________________________________________11 TESTS ___________________________________________________________________________11 CONCEPTION DU SITE _____________________________________________________________12 LE CAHIER DES CHARGES SE PRCISE ___________________________________________________12 CONCEPTION GRAPHIQUE ____________________________________________________________14 LE CODE _________________________________________________________________________15 PROBLMES RENCONTRS ET SOLUTIONS _____________________________________________18 POUR CONCLURE ____________________________________________________________20 APPORTS _______________________________________________________________________21 - TECHNIQUES ____________________________________________________________________21 - PERSONNELS ____________________________________________________________________21 CONCLUSION ____________________________________________________________________21

Remerciements
Je voudrais tout dabord commencer ce rapport en remerciant tous ceux avec qui jai eu la chance et lhonneur de travailler durant ces 10 semaines de stage. Mr Mlin pour mavoir engag dans son entreprise, Thierry Bertrand pour mavoir supporter durant ces 2 mois et rpondu toutes mes sollicitations sans jamais devenir fou, Bruno Lebgue et Jean-Jacques Libert pour leur accueil plus que chaleureux et amical, idem pour les deux employs de SAVD, Jean-Claude et JeanLuc. Je tiens aussi remercier pour leur prsence plus que remarquable les deux compres Linuxien que sont Sbastien et Lionel et galement pour leur bonne humeur communicative. Remerciements galement Robert Crocfer, mon tuteur de stage, pour stre dplac plusieurs fois pour prendre des nouvelles de lavancement du travail et mon ami Anthony Ricaud, spcialiste de la programmation web pour ses conseils sur les standards, son aide et ses rponses toutes mes (nombreuses) questions. Ce fut un plaisir chaque jour renouvel de travailler avec toutes ces personnes, et jespre pouvoir retrouver un jour dans le monde du travail une si bonne ambiance de travail.

Prsentation gnrale du stage

Prsentation de lentreprise
Consutech est donc une socit de consulting fonde en 1996 par Robert Melun. Ses domaines dactivits regroupent les ensembles et sous-ensembles lectroniques pour les applications utilises dans lindustrie, lnergie lectrique (classique et nuclaire), marine marchande et militaire. Elle ne compte rellement que deux employs, Mr Robert Melun, directeur et Mr Thierry Bertrand, technicien. Sambronic et Consutech sont intimement lis, cette dernire ayant t cre pour prospecter et dmarcher de nouveaux clients pour Sambronic. Ces clients travaillent dans des domaines diffrents comme la papeterie (Sibille, Aussendat-Rey), la ptrochimie (Total-Fina-Elf) et la sidrurgie (Usinor), mais on peut aussi y trouver de grosses industries telles que Jeumont Industrie, EDF, AlsthomABB, Sarelem, ETCA (marine marchande) Consutech est donc le lien qui unit les clients Sambronic, qui se charge de la production des pices et ensembles.

Sujet & cahier des charges

Il semble donc vident que Consutech a un besoin primordial de communication et douverture vers lextrieur. De plus notre poque o lInternet gouverne le monde linformation, la conception dun site web pour une entreprise semble donc primordial pour tre connu et reconnu. Cest donc en prenant en compte tout ceci que le sujet de mon stage prend tout son sens, en effet la conception du site Internet de Consutech lui permettra de se faire connatre de par le monde et de pouvoir renseigner des clients potentiels sur les activits de lentreprise. Il sagira donc dtre prcis, efficace et daller directement lessentiel. Le sujet se limite donc la construction du site web, et sen tiendra cela tout le long du stage, lentreprise tant dj assez consquente. Le cahier des charges cest lui toff au fur et mesure de lavance dans le temps et de la progression du travail. Il tait dfini au dpart que le site devrait prsenter la socit en respectant les diffrentes activits prsentes dans la plaquette de prsentation de Consutech : Etudes. Conseil, Expertise et Formation. Chaque activit est divise en deux parties : domaine et comptences. Parties qui devaient galement se retrouver sur le site pour pouvoir explicitement dtailler les activits voques prcdemment. Toujours concernant la plaquette, le style graphique du site devait lui aussi tre dans les mmes tons, soit jaune-orang, et ferait allusion par un ou des images lnergie lectrique. Dans la plaquette par exemple, on peut subtilement distinguer dans le fond jaune des pylnes lectriques, vocation parfaite du domaine dactivit de Consutech.

Voici la plaquette en question, tout dabord la face avant :

Et voici la seconde page, qui montre bien les tons et lanalogie avec lnergie lectrique grce limage de fond.

Autre contrainte, dupliquer le site en anglais, tant donn quune grosse partie de la clientle est internationale. part ces quelques contraintes dfinies par le cahier des charges initial, le reste tait ma charge, et les dtails du style graphique et la mise en page relevaient de mon propre sens artistique et de lorganisation. En conclusion, le cahier des charges ntait pas trs contraignant et trs directif, nombre de choses restaient mon seul jugement, et videmment taient aussi sujettes validation de la part de Mr Bertrand. Bien sr, les choses ont volu au fur et mesure de lavancement de la conception du site, Thierry donnant son avis sur tout ce qui tait fait, choisissant ce qui lui plaisait ou trouvait pratique.

Le dveloppement

Choix du type de programmation web

Pourquoi choisir les normes W3C ? Ds le dbut, il fallait choisir une ligne de conduite tenir et respecter concernant le codage du site. De part mon exprience prcdente, retenter laventure de la conception dun site web en utilisant la mthode ancestrale des tableau ne me plaisait gure. En effet, les ralisations prcdentes (cf projet 1re et 2me anne) ne mont pas donn pleinement satisfaction de part plusieurs facteurs, le manque de temps consacrer au travail principalement. Jai donc dcid de mettre mon profit le temps quil mettait donn pour apprendre concevoir un site web dune nouvelle manire, cest pour cela que jai choisis de dvelopp le site selon les standards du web qui respectent les normes W3C, et ce pour toutes les qualits quapporte cette mthode de programmation. Explications Utiliser les standards bon escient peut apporter de nombreux points plus que positifs un site Internet. Je vais ici mme tenter de vous convaincre que lpoque des sites entirement mis en pages grce lunique aide des tableaux est rvolue. Les normes W3C ont t cres pour permettre tous les utilisateurs de pouvoir naviguer sur locan immense de lInternet en toute quitude et ce sans avoir sinquiter dune quelconque compatibilits entre son navigateur et le site quil visite. Ces normes prnent la philosophie du site qui doit se plier au visiteur et non linverse. En effet, en tant que web dveloppeur, nous ne matrisons ni le navigateur, ni la plate-forme que le visiteur utilise ! Il faut donc utiliser un langage commun pour tre compris de tous, et cest ce que les normes W3C nous offrent. Concrtement, utiliser les standards du web pour coder un site revient utiliser de lhtml, tout simple, celui que tout le monde connat, mais de lutiliser de manire propre et ordonne. Il devient alors le xhtml, compatible avec les navigateur dhier et daujourdhui, le xml et toutes les nouvelles technologies qui fleurissent sur le net. Pour respecter une smantique parfaite, le xhtml doit juste servir exposer les informations et les donnes, rien de plus. La mise en page est rserve exclusivement aux feuilles de style, les CSS (pour Cascade Style Sheet). Cette sparation donnes/mise en page est la base de lInternet de demain, qui sera alors plus facile rfrencer, tre parcouru, etc Pour quelles soient le plus efficace possible, ces normes sont dfinies par des grands noms de linformatique comme Microsoft, AOL/Netscape, Opera, Apple, IBM, Adobe ou encore MacroMedia. Elles permettent ainsi dtre toujours ractif face aux nouveaux logiciels de navigation. Les normes du W3C prennent galement en compte le nombre grandissant de personnes handicapes qui naviguent sur Internet : dficients visuels, moteurs, problmes de mmoire, etc Rendre la navigation facile pour ces gens la rendra dautant plus facile pour les autres ! 9

Surtout que laveugle le plus connu du web est Google, et un balisage smantique clair et prcis permet de grandement amlior le rfrencement de son site. En plus de tout cela, les standards permettent un contrle plus prcis de la mise en page, du positionnement, de la typographie tout en autorisant des modifications par les utilisateurs (feuille de style personnalise). On peut dvelopper des comportements sophistiqus qui fonctionnent sur de nombreux navigateurs et OS, ainsi que respecter les lois et directives relatives l'accessibilit sans y sacrifier beaut, performances et sophistication. Une refonte dun site est ralisable en quelques heures et non plus en quelques jours ou semaines, do une rduction des cots et des tches inutiles ! De nombreux priphriques non traditionnels peuvent tre pris en charge, qu'il s'agisse de gadgets sans fil, de tlphones portables qui se connectent Internet, de lecteurs de braille ou de lecteurs d'cran pour personnes handicapes, l encore sans les casse-tte ni les cots des dveloppements multiples. Notons galement la possibilit de proposer, quasiment pour chaque page, une version imprimable complexe sans avoir crer de versions imprimables distinctes ni recourir de coteux systmes de publication propritaires. La sparation entre le style et la structure dun ct et le comportement de l'autre permet la ralisation de mises en page cratives qui pourront tre rutilises au sein de systmes de publication ou systmes documentaires complexes. Toujours un gain de temps et dagent ! Enfin, les standards donnent la garantie que les sites ainsi conus continueront fonctionner dans les navigateurs et priphriques de demain, y compris dans ceux qui n'ont pas encore t construits voire imagins. C'est ce que promet la compatibilit ascendante qui nous fait tellement dfaut de nos jours ! Ce sont toutes ces qualits qui doivent aujourdhui nous convaincre dutiliser les standards de manire systmatique pour toutes nos nouvelles ralisations. Ne laissons pas nos vieilles habitudes garder le dessus, commenons ds aujourdhui prendre nos responsabilits pour demain pour offrir au monde un Internet volu, intelligent, qui rpond toutes les exigences du monde actuel : rapidit, simplicit, cots minimum, etc Limites actuelles Pourtant aujourdhui encore des bugs subsistent, certains navigateurs interprtent encore mal les CSS, comme FireFox par exemple. On peut donc utiliser une mthode transitionnelle, trs pratique galement pour migrer dun site ancienne gnration vers un site respectant les standards. Elle consiste grer les gros placements laide de tableaux, mais uniquement pour les cadres principaux, par exemple la bannire place en haut, le menu gauche ou droite et le cadre de navigation. Il va donc falloir attendre quelque temps que les navigateurs Internet intgrent parfaitement la gestion des CSS pour pouvoir exploiter pleinement les qualits et innovations des standards. 10

Premiers pas
Les Tutoriaux Pour pouvoir exploiter au mieux la nouvelle manire de programmer que jai dcid dutiliser, il ma fallu me former sur le tas grce de nombreux tutoriaux que jai pu trouver sur des sites spcialiss. En effet, les normes W3C sont trs prcises et il faut respecter la lettre leur smantique. Durant les 2 3 premires semaines, jai donc cum les sites spcialiss dans les standards pour pouvoir me documenter sur toutes les rgles, us et coutumes et subtilits de ces nouvelles normes. Jai donc tent den apprendre un maximum sur les bases de la programmation pour ne pas avoir chercher la moindre aide chaque ligne de code. Plusieurs semaines ont donc t ncessaire, tant donn que ma culture personnelle sur le sujet ntait pas trs toffe, dautant plus pour le xhtml et surtout les CSS. Jai pu trouver beaucoup dinfos trs utiles sur openweb.eu.org, pompage.net et Alsacration, sites trs complets et pratiques. Il faut noter galement que jai pass quelques jours tudier des tutoriaux pour les animations en Flash, au cas o larchitecture du site permettrait den placer quelques-unes. Cette ide a rapidement t abandonne sur choix personnel, tant donn que ce genre de fioriture nest pas dune ncessit primordiale sur un site dentreprise et aurait alourdi le site autant en taille que visuellement. Tests Aprs avoir tudi de long en large les divers tutoriaux de base, il tait temps de mettre en pratique tout ce que javais pu apprendre. Je me suis donc mis tester toute sorte de ralisation une par une pour les apprhender au mieux. En effet, je pense quil aurait plus hasardeux de tester une grosse partie des diffrentes proprits offertes par les CSS dans le mme temps. Aprs avoir fait ces tests individuels et rgl les difficults qui pouvaient se prsenter, jai donc commenc les regrouper pour tester leur compatibilit afin de pas tre pris au dpourvu leur du vritable codage du site. Jai donc cr des cadres, je les ai plac un peu partout sur une page, ajout un fond, mis du texte, cr des liens, etc Le tout avec chaque fois les balises appropries et dfinies par les normes W3C. Cest avec surprise que jai dcouvert que tout ceci tait dune simplicit tonnante, incomparable la mise en page laide des tableaux. Autres tests effectus ce moment-l, mais qui navaient aucun rapport avec du code, concernaient laspect graphique du site. Jai commenc crer plusieurs visuels laide de Photoshop pour habiller le site, et ainsi permettre Thierry de pouvoir choisir et voir les possibilits qui lui taient offertes.

11

Conception du site
Le cahier des charges se prcise En attendant que le choix dfinitif du visuel du site soit clairement tabli, jai imagin plusieurs styles de mise en page avec les fonds qui saccordaient. La mise en page classique, avec bannire en haut et menu en colonne gauche. Notons que jai galement envisag avec le menu droite, et aussi avec une colonne de chaque ct.

Ou bien encore avec un menu en onglet qui aurait t dispos en ligne sous la bannire.

12

Bien que les ides taient bonnes, ces configurations nont finalement pas t retenues pour une raison principale : le site au final prsentera peu dinformation textuelle. En effet, ce genre de mise en pages convient mieux des site qui comportent beaucoup de texte ou des mises jour frquentes. Ici ce nest pas le cas, la principale fonction du site sera de prsenter lentreprise et ses produits par lintermdiaire de photos principalement, lesquelles seront accompagnes de texte explicatif. Avec Thierry, nous avons donc dcid de placer le menu sur la droite, dans le mme style que sur la plaquette, aussi bien en criture quen couleur. Menu qui serait dailleurs toff par rapport ce qui tait prvu prcdemment. En effet, Thierry dcida de rajouter plusieurs parties, en plus de celles dj prsente sur la plaquette. Il a ensuite fallu trouver un fond qui collerait bien limage de Consutech et de son domaine dactivit. Jai donc fait une recherche dans des banques dimages libres de droits pour trouver ce qui pouvait nous convenir, et aprs slection, jai propos les diffrentes trouvailles lil expert de Thierry. Dun commun accord, nous nous sommes fixs sur une image qui, en plus de reprsenter parfaitement lnergie lectrique, saccordait merveille avec la plaquette.

Cest ce moment de la ralisation quun choix devait simposer concernant la rsolution minimale du site. Je devais choisir entre permettre aux petites rsolutions de 800*600 de visiter le site sans encombre et davoir une version trs petite pour les plus grandes rsolutions ou alors de faire une rsolution minimale de 1024*768 et de sacrifier les plus petites. Une autre solution tait aussi envisageable, cest de faire le site entirement en taille variable grce aux pourcentages. Seulement cette solution ne sied pas aux sites qui basent leur mise en page sur des images, ce qui tait le cas ici. Jai donc pris la dcision de construire le site sur une base denviron 1000 pixels de largeur en taille fixe.

13

Conception graphique Cette dcision prise, jai pu me concentrer sur la mise en pages des lments : logo, zone de navigation, menu, etc Comme convenu, jai plac le menu sur la droite, sur toute la hauteur de la page. Jai ensuite eu lide dinsrer le logo de Consutech directement dans limage de fond pour permettre de linsrer avec un effet graphique de fondu. De cette manire, le logo sintgre parfaitement dans limage.

Depuis le dbut, javais dans lide de faire apparatre les pages de navigation dans un cadre pour ne pas avoir recharger toute la page entire chaque clic sur un lien. Ainsi, seule cette zone se rechargera, ce qui conomisera du temps et galement de la place sur le serveur. Jai donc commenc coder le site avec un cadre blanc comme fond de la zone de navigation, que jai ensuite remplac par un halo blanc directement incrust dans limage de fond galement, de la mme manire que le logo. Ainsi on ne se privait pas dune partie de limage de fond qui reste toujours visible, avec le texte en surimpression par-dessus.

14

Le site avait donc son aspect graphique dfini et il ne restait plus qu coder pour incruster tous les menus, liens et page html. Le code Cette partie tait donc la plus longue et la plus importante de toute la conception du site. Comme expliqu prcdemment, la premire partie qui fut code tait le menu, aid par les directives de Thierry concernant le contenu quil a toff et nous avons choisi ensemble les couleurs, lemplacement et lordre des titres.

15

Il fallait ensuite crer les pages qui seraient pointes par le menu. Jai donc crer autant de pages html quil y a de titres dans le menu, et jai cod la partie en php dans la page dindex qui permet dafficher la bonne page selon le lien cliqu. Pour aller plus loin, javais besoin de la participation de Thierry qui devait me prciser quoi mettre dans chaque page en plus des parties Domaine et Comptences provenant de la plaquette. Thierry mexpliqua alors quil aimerait voir dans ces pages des photos quil me fournirait par la suite avec un texte explicatif associ chacune delle. La meilleure solution de mise en page semblait tre celle des popups qui souvriraient et afficheraient la photo depuis des liens situs dans les pages html de chaque domaine dactivit. Aprs renseignements, jai voulu afficher ces popups grce au javascript, ce qui cest rvl tre finalement une mauvaise ide avec la configuration du site. Je dtaillerais cette partie dans le prochain chaptre. Comme les popups en javascript ne convenaient pas, jai donc du trouver une nouvelle mthode, qui cest trouv tre celle des fentres toutes simples, mais accompagnes de proprits qui rendaient laffichage plus propre et stylis.

On peut voir en effet que la fentre apparat avec une taille prdfinie, une absence de barre de dfilement, de menu et dadresse. Par contre, point important, elle doit tre imprativement redimensionnable au cas o la mise en page ne se ferait pas comme prvu. Il serait en effet gnant que du texte ou une image disparaisse en dehors de la fentre sans que lutilisateur puisse faire quoique ce soit. Il est aussi prvu douvrir la fentre au milieu de la page, pour amliorer laspect visuel.

16

Aprs que Thierry eut fini de dfinir le contenu de chaque domaine dactivit, texte et photos, jai pu me mettre remplir les pages html et faire leur mise en page.

La conception du site touchait ds lors au but, et il ne restait plus qu peaufiner quelques dtails et traduire le site en anglais, chose qui ne sera faite que lorsque le site original sera entirement termin. Les derniers dtails concernaient principalement les liens vers la prsentation de la socit Consutech, un lien mail pour pouvoir tre contact et un dernier lien qui ouvrira une fentre vers une courte prsentation avec photo de Sambronic. Petit rajout, jai mis un cadre vide juste au-dessus du logo de Consutech avec un lien vers la racine pour revenir laccueil si besoin est.

17

Pour la traduction en anglais, jai repris toutes les pages, index, pages html et popups dans le mme ordre de rangement pour avoir modifier le moins de liens possibles et jai traduis tout le texte, noms de photos, etc Pour gagner du poids, jai chang les liens des images pour faire pointer les liens vers les dossiers dimages de la version originale, chose qui me semblait vidente.

Pour en finir dfinitivement, jai dcid de faire passer au site le test du validateur W3C. On note ladresse du site dans un formulaire et le validateur vrifie le code html et aussi les CSS dans un autre validateur. Les erreurs sont affiches avec les numros de lignes pour permettre une correction facile, et lorsque toutes les erreurs sont corriges, le validateur offre la possibilit de placer des logos qui pointeront vers le rsultat de la validation comme preuve. Aprs cette tape, le site a dfinitivement t charg sur le serveur de Consutech que Sbastien et Lionel avaient configur. Ladresse www.consutech.fr fut relie au serveur pour tre accessible par tous.

Problmes rencontrs et solutions

Les principaux problmes que jai pu rencontrer concernaient la compatibilit du site avec les diffrents navigateurs, Internet Explorer pour tre exact. Car il faut bien avouer que le navigateur de Microsoft est une vraie plaie concernant linterprtation exacte des CSS et du xhtml. De nombreuses fois jai du revoir le code pour que les proprits des CSS soient correctement interprt de chaque ct, gnralement pour des placement de cadres. 18

Le plus gros problme que jai eu se situ par contre dans les popups en javascript comme je lai dj abord prcdemment. Pour comprendre le problme, il faut dj visualiser comment se prsentaient ces popups :

Un clic sur Lien (ouvre popup 1) ouvrait donc une fentre qui apparaissait en surimpression au-dessus de la page. On ne pouvait la dplacer, mais lavantage tait quelle tait trs lgre et trs ractive. Pour la fermer, ctait simple, il suffisait de cliquer nimporte o dessus. Dans le site, cette fentre souvrait donc dans le cadre de navigation en prsentant la photo et lemplacement du texte explicatif. Sur Safari (Mac OSX) ou FireFox (Mac et PC) aucun problme, par contre je me suis rendu compte bien tard que sur Internet Explorer les choses taient loin dtre aussi merveilleuses. En effet, lorsque lon cliquait sur un des liens du menu, le cadre de navigation disparaissait tout simplement Si on cliquait une seconde fois, il rapparaissait et lon pouvait enfin cliquer sur un des liens qui devait ouvrir un popup. Sauf quvidemment cela aurait t trop facile ! Il fallait galement cliquer deux fois sur le lien pour que la popup souvre, et si lon cliquait dessus pour la fermer, cest nouveau tout le cadre de navigation qui se refermait. Bref un micmac des plus alambiqu. Malgr des recherches, restes veines, jai du me rsoudre changer de mthode, seulement javais dj cod toutes les popups de cette manire avant de tester sur Internet Explorer, erreur de ma part. Jai donc du tout recoder pour permettre dutiliser des fentres classiques quipes des proprits adquates pour rendre le mieux possible, ce qui ne fut pas conomique en temps.

19

Pour Conclure

20

Apports
- Techniques En ce qui concerne la technique, jaurais normment appris de ce stage, principalement tout ce qui concerne les standards. Jai dcouvert combien il tait plus facile de mettre en pages un site en utilisant un code propre et les CSS et ce sans passer par des tableaux plus que laborieux grer. Ici jai pu faire ce que je voulais des cadres, les placer o bon me semblaient sans devoir prendre garde aux autres. Cest vraiment agrable ! Je me suis aussi rendu compte quune smantique claire et bien dfinie vitait de nombreux dsagrments de compatibilits entre les navigateurs, mme si le risque 0 nexiste pas. Quel plaisir galement de pouvoir produire un code propre et ordonn o lon peut facilement se retrouver, soi-mme ou la personne qui pourrait reprendre le travail. Notons combien il est galement utile et surtout primordial dtre mthodique et ordonn. Chaque chose doit tre faite une aprs lautre et pas tout en mme temps, au risque de se perdre et de ne plus savoir o lon en tait. - Personnels Dun point de vue personnel, jai trs apprci denfin me retrouver dans le monde du travail avec un vritable travail effectuer, un cahier des charges respecter, des gens qui comptaient sur moi, etc Faire partie du groupe Consutech tait vraiment motivant, dautant plus que mon travail est reconnu et utilis. Jai aussi pu me rendre compte que lorsque jtais pris dans quelque chose, je pouvais difficilement dcrocher jusqu trouver une solution ou terminer, syndrome classique de linformaticien ! Ceci avant tendance prouver que jaimais ce que je faisais, et ma confirm dans mon choix dorientation pour la suite de mes tudes vers une Licence Pro en dveloppement Web.

Conclusion
Je suis vraiment plus que satisfait du stage que jai effectu durant ces 10 semaines. Ce fut une exprience des plus enrichissante, avec un sujet intressant et utile pour mon avenir, qui ma permis dvoluer et de me tourner vers de nouveaux horizons. Jai appris de nombreuses choses que je compte rutiliser et amliorer dans les prochaines annes. Que dire galement des personnes que jai pu ctoyer durant ce stage, part que jai toujours t trs heureux de travailler avec eux, aussi bien mes camarades de lIUT, Sbastien, Lionel et Rachida que Thierry, Robert, Jean-Jacques, Bruno, Jean-Claude, Jean-Luc et Christine de Consutech, Sambronic et SAVD. Je les remercie tous aussi bien pour laccueil chaleureux dont ils ont fait preuve, que pour leur aide et leur bienveillance et leur bonne humeur continuelle. Merci galement nos tuteurs de nous avoir rendu visite et soutenu durant ce stage ! 21

1 2 3 4 5

7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!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="fr" lang="fr"> <head> <title>Consutech.fr</title> <meta name="description" content="Consutech.fr, site web de la socit de consultation spcialise dans l'environnement lectronique pour la production d'nergie lectrique." / > <meta name="keywords" content="Consutech, sambronic, &eacute;lectrique, prodution, &eacute;nergie &eacute;lectrique, consulting, consultations, conseil, &eacute;tudes, armoire d'excitation, marine nationale, circuit CP900 nucl&eacute;aire, r&eacute;gulateur RTT, nucl&eacute;aire, expertise, maintenance, r&eacute;novation, s&eacute;quence &agrave; relais, relais de protection, chassis d'excitation, pont de thyristors" /> <meta name="robots" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="feuille_style.css" media="screen" title="style_defaut" />

</head> <body> <div id="global"> <a id="flag" title="English" accesskey="8" href="http://www.consutech.fr/us/"> <img src="english.gif" alt=""/> </a> <a id="societe" title="La Socit" accesskey="9" href="index.php?id=soc">La Socit</a> <address><a id="contact" title="consutech@consutech.fr" accesskey="10" href="mailto:consutech@consutech.fr, robert.melun@consutech.fr">Nous contacter</a> </address> <a id="sambronic" href="popup/sambronic/popup1.htm" onclick="window.open(this.href, 'Photo', 'height=530, width=800, top=130, left=170, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;">Sambronic</a> <ul id="menu_global"> <li><a id="menu1" title="Maintenance-Rnovation" accesskey="1" href="index.php? id=mnt">Maintenance/Rnovation</a></li> <li><a id="menu2" title="Mise en Service" accesskey="2" href="index.php?id=mise">Mise en Service</a></li> <li><a id="menu3" title="Produits Neufs" accesskey="3" href="index.php?id=prod">Produits Neufs</a></li> <li><a id="menu4" title="Formation" accesskey="4" href="index.php?id=form">Formation </a></li> <li><a id="menu5" title="Expertise" accesskey="5" href="index.php?id=exp">Expertise</a> </li> <li><a id="menu6" title="Conseil" accesskey="6" href="index.php?id=cons">Conseil</a></li> <li><a id="menu7" title="Etudes" accesskey="7" href="index.php?id=etu">Etudes</a></li> </ul> <a id="logoconsutechfr" title="Consutech.fr" accesskey="0" href="http:// www.consutech.fr/"></a> <div id="nav"> <?php switch($_GET['id']) {case '#': include('construction.htm');
1/2

21

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Macintosh HD:Users:samuelde:Sites:consutech:test_final:index.php:

41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

break; case 'soc': include('soc.htm'); break; case 'mnt': include('maint_renov.htm'); break; case 'mise': include('mise_serv.htm'); break; case 'prod': include('prod_neuf.htm'); break; case 'form': include('formation.htm'); break; case 'exp': include('expertise.htm'); break; case 'cons': include('conseil.htm'); break; case 'etu': include('etudes.htm'); break; default: include('intro.htm'); break; } ?> </div> <div id="copyright"><a id="samD" href="mailto:samuel.d@free.fr">SamD.</a>2005</div> <a id="mac" href="http://www.apple.com/fr/" onclick="window.open('http://www.apple.com/ fr/', 'Apple'); return false;"><img src="mac.gif" alt="Apple.com"/></a> <p> <a id="w3chtml" href="http://validator.w3.org/check?uri=referer"><img src="http:// www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p> <p> <a id="w3ccss" href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width: 88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" / ></a> </p> <a id="hidden" href="admin/index.php"></a> </div> </body> </html>

88 89 90 91 92 93 94

Macintosh HD:Users:samuelde:Sites:consutech:test_final:index.php:

2/2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

/* CSS Document */ *{ margin: 0; padding: 0; font-family: Helvetica, Verdana, sans-serif; } body{ margin: 0; text-align: center; background-color:#000000; } #global { position: relative; /* on positionne le conteneur */ margin-left: auto; margin-right: auto; width: 1000px; /*87%;*/ height: 768px; text-align: left; background: url(fond2.jpg) no-repeat; }

/*style de la balise ul*/ ul{ /*border: 1px solid #f00;*/ list-style: none; /*on supprime les puces*/ padding: 0px; /*pas de dcalage autour du menu*/ margin: 0px; /*idem*/ z-index: 1; } #menu_global{ position: absolute; float: right; right: 0%; /*largeur et hauteur de la balise par rapport la taille de l'image de fond*/ width: 450px; /*35%;*/ height: 570px; /*41%;*/ } /*style de la balise A*/ a{ /*border: 1px solid #f00;*/ color:#000000; /*padding: padding-top padding-right padding-bottom padding-left Le texte est dcal dans sa balise de 5px vers le bas (padding-top), 5px vers la droite (padding-left) 5px vers le haut (padding-bottom) et 5px vers la gauche (padding-right) Compte pour toutes les balises*/ padding: 5px 5px 5px 5px; }
1/6

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

a:hover{ color:#FF9900 !important; } #menu_global a{ width: auto; height: 20px; }

#menu1{ position: absolute; display: block; top: 5%;/*50px; /*plac 20 pix du bord haut du conteneur UL*/ right: 1%;/*300px; /*plac 300 pix du bord gauche du conteneur UL*/ color:#CDC8F7; font-size: 28px; text-decoration:none; } #menu1:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #menu2{ position: absolute; display: block; top: 18%;/*90px;*/ right: 1%;/*200px;*/ color:#F5F18F; font-size: 28px; text-decoration:none; } #menu2:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #menu3{ position: absolute; display: block; top: 31%;/*130px;*/ right: 1%;/*80px;*/ color:#FF9966; font-size: 28px; text-decoration:none; } #menu3:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; }
2/6

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176

#menu4{ position: absolute; display: block; top: 44%;/*170px;*/ right: 1%;/*130px;*/ color:#CCFFFF; font-size: 28px; text-decoration:none; } #menu4:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #menu5{ position: absolute; display: block; top: 57%;/*210px;*/ right: 1%;/*60px;*/ color:#FFCC66; font-size: 28px; text-decoration:none; } #menu5:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #menu6{ position: absolute; display: block; top: 70%;/*130px;*/ right: 1%;/*80px;*/ color:#0099CC; font-size: 28px; text-decoration:none; } #menu6:hover{ font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #menu7{ position: absolute; display: block; top: 83%;/*170px;*/ right: 1%;/*130px;*/ color:#009966; font-size: 28px; text-decoration:none; } #menu7:hover{
3/6

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235

font-size:28px; text-decoration:underline; padding: 5px 5px 5px 5px; } #flag{ position: absolute; display: block; /*top: 5%;*/ left: 0%; } #societe{ position: absolute; display: block; top: 1%; left: 5%; font-size: 12px; color:#000000; height: auto; } #contact{ position: absolute; display: block; top: 1%; left: 13%; font-size: 12px; color:#000000; height: auto; } #sambronic{ position: absolute; display: block; top: 1%; left: 23%; font-size: 12px; color:#000000; height: auto; }

#logoconsutechfr{ position: absolute; display: block; /*border: 1px solid #f00;*/ width: 265px; height: 80px; top: 100px; left: 73px; }

#nav{ position: absolute; width: 724px; height: 517px;

4/6

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294

top: 218px; left: 20px; z-index: 1; overflow: auto; text-align:center; } .titre{ font-weight: bold; font-style:italic; } #liens{ text-align: center; margin-left: auto; margin-right:auto; } #liens a{ display:block; } #competences{ margin-left: 5px; margin-right: 5px; } #intro{ position: relative; font-size: 60px; font-family: Impact, Tahoma, Verdana, Helvetica; font-style: italic; font-weight: bold; top: 35%; width: 500px; margin-left:auto; margin-right:auto; } #copyright{ position:absolute; float: left; bottom: 1%; left: 42%; font-family: Tahoma, Verdana, Helvetica; font-size: 10px; color: #FFFFFF; } #samD{ color: white; } #mac{ position: absolute; bottom: 0%; left: 50%; }
5/6

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313

#w3chtml{ position: absolute; bottom: 0%; left: 810px; } #w3ccss{ position: absolute; bottom: 0%; left: 905px; } #hidden{ position: absolute; float: right; width: 10px; bottom: 7%; right: 1%; }

Macintosh HD:Users:samuelde:Sites:consutech:test_final:feuille_style.css:

6/6