SITE INTERNET « les fans de la ruelle en chantier »

Présentation au sujet: "SITE INTERNET « les fans de la ruelle en chantier »"— Transcription de la présentation:

1 SITE INTERNET « les fans de la ruelle en chantier »

2 Description La ruelle en chantier est un groupe montluçonnais (AUVERGNE)

3 Description Le groupe la ruelle en chantier est un groupe jeune qui a besoin de publicité De plus en plus de personnes connaissent ce groupe sur le bassin montluçonnais Et bientôt ailleurs…

4 Description Lorsque l’on est fan de la ruelle en chantier, quelles informations peut- on avoir ? Il n’existe pas de site des fans Le site de la ruelle n’est pas forcément mis à jour Le forum est confus

5 La charte graphique Nous avons repris les couleurs du groupe : Bleu Jaune Orange

6 Charte graphique Nous nous sommes inspirées du site :

7 Nous nous sommes inspirées du forum : Charte graphique

8 Nous nous sommes inspirées du myspace : Charte graphique

9 Nous avons utilisé la police « VERDANA » pour que la police ne change pas selon les ordinateurs (pas de police par défaut) et pour donner une touche plus ronde et personnelle, plus vivante, à l’image du groupe.

10 CSS a:link { color: #FF9933; background-color: #FFFF00; cursor: hand; text-decoration: none; background-attachment: fixed; background-repeat: no-repeat; } a:visited { color: #3300FF; text-decoration: none; background-color: #FF9933; } a:hover { color: #FF9933; background-color: #0033CC; } p { font-family: "Verdana"; font-size: 16px; color: #000000; } a img { border:none; text-decoration:none; } Pour que les images n’aient pas de bordure bleue lorsqu’elles sont en miniatures Police de caractère Pour les liens du site : -Orange sur fond jaune -Survolé orange sur fond bleu -Cliqué bleu sur fond orange VOIR

11 CSS Une exception pour les liens : Pour différencier les liens de contenu du site, et les liens de contacts avec les concepteurs du site.

12 Structure du site Arborescence Site SUITE

13 Arborescence Menu Rubriques Galerie photo Nom Galerie 1Nom Galerie 2 Photos galerie 2 Retour Galerie photo Galerie vidéoAdresses utiles

14 Un modèle Un modèle tout en tableaux :  4 lignes (logo – bannière, sommaire – contenu, mentions légales)  2 colonnes (logo – sommaire, bannière – contenu – mentions légales)

15 Un modèle Le modèle est appliqué à toutes les pages. Cela donne une structure fixe au site, et permet un meilleur visuel et une cohérence pour la charte graphique. Plus net pour l’œil du visiteur…

16 Photoshop Nous avons utilisé Adobe pour : La bannière Les photos Les logos

17 La bannière

18 Les photos Trois types de photos : Miniatures donnant sur un agrandi Photos « directes » Photos « images survolées »

19 Les photos A noter que nous avons dû « enlever » un membre du groupe qui a quitté celui-ci… Adieu Julien !!

20 Les logos Deux sortes de logos : Les logos « cliquables » Les logos simples mais animés

21 ATTENTION, CHANTIER Nous avons fait une affiche avec Adobe Photoshop en nous inspirant de vrais panneaux existants. Cette image sur les pages où il n’y a pas de contenu est plus sympa à voir que rien ou l’éternel bulldozer en construction.

22 La musique Le logo indique qu’il y a une musique disponible à l’écoute pour cette chanson… Un lecteur flash est mis dans le code source pour que les gens puissent écouter sur leur ordinateur. A noter que la musique apparaît dans une nouvelle page pour que le visiteur puisse continuer à naviguer tout en écoutant.

23 La galerie vidéo Nous avons pris des vidéos de Youtube et MySpaceTV et nous avons intégré le lien dans le code source.

24 Les adresses liées au site Pourquoi ces adresses ?? Site de la Ruelle en Chantier Le forum de la Ruelle en Chantier Le myspace de la Ruelle en Chantier Le site du Webmaster de la Ruelle en Chantier Le myspace de Guerem Le myspace de Matt Le myspace de Debbie Le myspace de Anne-So Le myspace de maryon

25 Serveur Web Pourquoi ? Parce que c’est free et gratuit !! Nous voulions poursuivre le site plus tard dans la vie, et pas seulement pour le projet web et hypermédia. Il n’était donc pas possible d’utiliser le serveur de l’IUT.

26 Référencement Balises pour la description du site. C’est la phrase vue dans le résultat du moteur de recherche Liste de mots clés, par ordre de pertinence Cette balise dirige le robot indexeur dans sa tâche. Il récupère les liens de notre page pour les référencer plus tard Le robot revisite la page au bout de 30 jours, comme le contenu de notre site évolue régulièrement

27 FIN