HEAJ Année Scolaire

Transcription

1

2 Pour faire mon site web, j'ai procédé de différentes manières. Tout d'abord, j'ai travaillé sous PhotoShop pour créer un «pseudo design» d'interface graphique. Ce fut tout à fait un travail à l'aveugle car je n'avais aucune idée de ce que j'allais faire ni ou j'allais... Ci-dessous, l'image dont je me servais pour mes pages web. Celles-ci était intégrée dans une «library» et, ainsi, elle était censée me simplifier la vie... Par la suite, après quelques problèmes dû au code html et à l'image PhotoShop, j'ai laissé tombé cette idée pour me tourner vers une idée plus simple à mettre en route. Je me suis créé un logo, en parallèle au cours de «PortFolio Presse». Ce logo, je ne savais pas encore s'il allait m'être utile dans la

3 création de mon site web. Je le voulais néanmoins avec une forme globale rappelant la 3d (le cube percé d'une sphère) avec mes initials à l'intérieur. Pour le fun, je les ai même fait tourner pour la version «3d temps réel»... Ci-dessous mon logo représentant mes initiales entourés par mon domaine d'investigation. Par la suite, comme je voulais avant tout mettre un site web en ligne afin de voir ce qui fonctionnait et ce qui n'allait pas. Je voulais également mettre un site en ligne pour réserver mon «Domain Name Server» et vérifier que je n'avais rien perdu de mes connaissances (moyennes) en html. J'ai donc créé un site tout ce qu'il y a de plus basique au niveau design, mais très efficace pour la navigation et très simple à mettre en place. J'ai procédé de la manière suivante : j'ai repris ce que nous avions appris

4 avec monsieur St Moulin en début d'année. Comme je me sens beaucoup plus à l'aise avec le code, j'ai fait tout mon site directement en ligne de code. J'ai créé des tableaux en pourcentage dans lesquels j'ai inséré d'autres tableaux. A ce moment, j'ai arrêté d'utiliser la «library», comme ma page web était divisée en deux zones bien distinctes, j'ai commencé à jouer avec les «iframe». Pour cette configuration de site, ce procédé marchait à merveille! Ci-dessous la page de garde de mon site web édité en ligne de code grâce à des tableaux imbriqués et des iframe. Sur la droite, l'iframe de mon menu, qui ne bouge pas, sur la gauche l'iframe du contenu, c'est dans cette iframe que mon PortFolio se «déploie». Une troisième version de mon site web verra le jour par la suite. Cette version deviendra par la suite la version définitive de mon site web. Sur cette version, j'ai repris l'idée principale de la première version (à savoir l'ellipse) que j'ai re-dessinée. La typo du texte a été modifiée, le design repensé entièrement, surtout pour l'agencement et la page d'accueil.

5 Ci-dessous la page «contact» de mon site web repensé une première fois. On peut y voir que la grande ellipse blanche a disparue, remplacée par une ellipse plus discrète. Il n'y avait «qu'un seul» problème à ce site, si l'on peut dire... Il n'y avait pas une once de texte. En effet, de par sa forme peu commune en web, tout était fait en image, aussi bien le design que le texte. Le tout était découpé en tranches dans PhotoShop et placé dans un tableau, centré au milieu d'une page web au fond noir afin que l'on ne distingue pas de différence. Enfin, la version définitive, celle qui est en ligne encore actuellement, est apparue. Dans cette version de mon site web j'ai fait les modifications suivantes : J'ai allégé le design en faisant disparaître l'ellipse et en la suggérant à l'internaute. J'ai supprimé le contenu uniquement «image» par du texte. Pour cela j'ai du trouver une parade au problème que je rencontrais tout le temps : comment écrire de l'html dans une forme non rectangulaire. La solution m'a été offerte grâce à l'utilisation des Css, des tableaux, des calques et des zones réactives. J'ai aussi corrigé la page d'accueil en l'allégeant et la rendant plus attractive.

6 Ci-dessous, l'interface repensée et allégée. L'ellipse, toujours présente est plus suggérée que dessinée. Cela permet de donner plus de légèreté au site. Cela me permet aussi de facilité tout le code html pour l'ajout du texte.

7 La page d'accueil a été repensée. Les menus ont disparus pour ne laisser la place qu'à l'image (une caricature réalisée dans le courant de ma première année à l'heaj). Cette image surmontée par une zone réactive qui, lorsqu'on clique dessus, envoie directement l'internaute sur la page principale de mon site, à savoir la galerie 3d. Ci-dessous la page d'accueil de mon site.