Note d’intention de la réalisation d’un site web

 Contexte de la réalisation

De part ma formation dans la gestion de projet internet, j’ai été amené à créer ce qui constitue aujourd’hui une dizaine de projets variés directement sur internet. Allant du simple projet photographique à la réalisation complète de sites internet. Ainsi, j’explore les arts graphiques et musicaux, le développement et tout simplement la création de contenu sur internet.

Ainsi, l’objectif de ce site web est de proposer une sélection sous forme de galerie de quelques projets qui sont à mon sens les plus aboutis.

 

Organisation et style graphique du site web

Etant donné que je suis relativement bien présent sur internet, je ne souhaite pas sortir de la ligne graphique que je me suis fixée depuis septembre 2014. En effet, aujourd’hui, mon profil LinkedIn ainsi que mon blog/portfolio officiel m’offre une certaine visibilité sur les moteurs de recherche principaux français (google.fr et yahoo.fr). Ces derniers respectent une cohérence graphique que je souhaite maintenir avec ce nouveau site.

Afin de ne pas faire redondance, j’aborde ici plutôt mes projets artistiques et graphiques. Ainsi, en plus de la page d’accueil, le site comprendra les pages suivantes :

  1. Une page sur mes projets photographiques
  2. Une page sur la production de « Reversed Music »
  3. Une page sur mes projets pédagogiques web
  4. Une page sur différents supports de communication powerpoint et prezi que j’ai réalisé.
  5. Une page sur mes travaux graphiques appliqués : réalisation de logos par exemple.

site_web_aigeme2

Document technique de la réalisation du site web « aigeme-eginer »

Site Web mis en ligne le 24/02/2015

http://aigeme-eginer.easynomie.com/index.html

Charte graphique du site web

Depuis maintenant presqu’un an je donne une cohérence aux documents et contenus médiatiques que je crée et partage sur internet. Ainsi, l’un des objectifs du site est de s’accorder avec une charte graphique déjà bien établie et liée à la gestion de ma présence sur internet. Ainsi, le logo ci-contre apparait sur quasiment toutes mes productions. De même, les couleurs ainsi que les polices d’écritures (Droid Sans et Lobster qui sont des polices du type Google font donc comprises par tous les navigateurs récents) sont identiques sur mes différents sites internet. De même, l’imagerie est identique par rapport à mon blog personnel, ce site et mon profil LinkedIn[1].

J’ai choisi de mettre en place une galerie de mes projets créatifs et pédagogiques car ce n’est pas quelque chose sur lesquelles je publiais véritablement sur mes autres sites web. Notamment par exemple, je ne parle nul par ailleurs des quelques travaux de production de Musiques inversées ou encore des mes productions de supports de communication. A noter, je ne cherche pas à communiquer de manière institutionnelle d’où notamment l’intégration d’une musique depuis soundcloud.

comparaison_web

Explication du code source

Le CSS

Il n’y a pas de difficulté particulière dans mon code source. i-contre, voici le code qui ma servit pour la mise en page générale de mes pages. Les deux particularités à retenir dans ce code sont 1) les deux premières lignes. Celles-ci font appel à deux polices d’écriture de type google font. Cela me permis d’afficher quelque soit le navigateur du client les polices que j’ai choisi pour mon site, à savoir « Droid Sans » et « Lobster Two ». 2) l’image de fond à pour attribut « cover ». Ici, c’est une fonction CSS3 qui me permet, quelque soit la taille de la fenêtre ou de l’écran de toujours mon image de fond sans qu’elle soit rognée ou déformée.

Concernant l’en-tête, les menus et le corp du site, il n’y pas de difficultés particulières. Notons tout de même la prise en compte de la transparence (le « O.5 » en attribut du background-color) et le « border-radius » qui permet d’arrondir les angles de chaque partie du site.

Le code HTML

Concernant l’ensemble des 6 pages composant ce site internet. Nous notons tout d’abord que le code HTML de la structure des pages est identique. L’en-tête, ainsi que le menu, ses sous-menus (partie gauche du site) et le corps du texte (partie droite) ne varient pas. Pour l’agencement des « div », je fais usage de l’attribut « float » dans le css. Ensuite, deux particularités sont présentes sur le site web. Premièrement, pour le dernier sous-menu, je fais usage d’un code javascript, celui-ci est un code indiquant le jour que nous sommes et est disponible sur des sites de partage de code. Secondement, sur toutes mes pages du site j’utilise énormément le code html <iframe>. Celui-ci sert à faire appel à des ressources externes au site. Il n’a pas non plus posé de difficulté puisque la plupart des sites hébergeant des ressources (prezi, youtube…) fournissent directement le code de manière à faciliter son intégration. La seule modification que j’ai apportée fut la redimension des <iframe> issue de slideshare de manière à avoir une largeur identique aux autres intégrations (prezi notamment). Ensuite, les <iframe> sont entourés des balises <center></center> de sorte à les cadrer parfaitement au contenu.


[1] Il est possible de cliquer sur les images pour accéder au différentes pages.