SITE INTERNET « les fans de la ruelle en chantier »

Slides:



Advertisements
Présentations similaires
Votre logo à insérer ici
Advertisements

Nom de lintervenant Titre de lintervention. Tapez le titre de votre slide (si besoin) Tapez votre titre principal Tapez votre sous titre ou votre texte.
Bien visible sur internet 
1Er Partie Intervenants : Nuno Barata Alain Joly Thierry Belvigne
Créer un site web en équipe
Création de site internet
1 : Léditeur 2 : Le traitement dimages. 3 : La visionneuse dimage. FRONTPAGE PAINT SHOP PRO ACD SEE.
Site WEB: communication grand publique
PROPOSER UN SITE WEB POUR LE REPERTOIRE DU COLLEGE QUI ? POURQUOI ? QUOI ? QUAND ? COMMENT ?
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
L'architecture d'un site Toile : L'architecture d'un site Toile : Quelles informations pour Quel public ? Deux questions très importantes sont à poser.
Conception et mise en page
Utilitaire pour créer des diaporamas en Flash et HTML : PORTA
12 novembre 2012 Grégory Petit
MD 112 BELGIUM Sites Web Clubs proposés gratuitement par le MD.
API Présentation Comment ajouter des pages. Vous voici dans notre site « laboratoire » pour la démonstration RAJOUTER UNE PAGE.
BERNARDIN Benoît Lycée Louis Pergaud
Applications Internet – cours 3 La page web
Titre de votre session Prénom NOM Fonction ORGANISME Votre logo
Prologue : les premiers préparatifs Première étape : Ouvrir le logiciel de création de pages au format HTML (pages Web) Deuxième étape : enregistrer la.
Concevoir un diaporama avec Power Point.
Documentation pour webmestre site sud-aerien.org
Identifier ce qui peut gêner ou bloquer votre référencement Sébastien Billard, consultant référencement.
Les fonctionnalités : Contacts Windows Présentation de CARNET DADRESSE.
CSS.
Référencement Que peut faire baisser votre classement ?
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
Mars 2013 Grégory Petit
Le multimédia à l ’école : une révolution ?
Communication de recrutement
31 octobre 2012 Grégory Petit
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.
La refonte des sites d’appui Ce qui change pour vous.
Créer un site internet facilement Jimdo – Pages to the People.
Cliquez pour modifier le style du sous-titre Cliquez pour modifier le style du titre.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Présente Conception d’un petit site Web. 2 4-nov-03© Préambule Cette présentation fait suite à celle intitulée « Imaginer, concevoir, mettre.
Manuel Kervarker.org : l'accueil
Tous droits réservés 04 octobre 2005© présente Les Moteurs de Recherche.
Centre de RessourcesRechercheravecInternet Aide. Centre de Ressources Rechercher avec Internet 1.Les différentes fonctions du navigateur 1.Les différentes.
1 Utiliser un blog “écrire un billet ou un commentaire et le publier” Quelques données techniques: Un blog est une suite d’articles appelés billets, publiés.
Cliquez pour modifier le style du titre
Concevoir un site web de A a Z Cours 3. Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
POWERPOINT.
Titre de votre session Votre logo à insérer ici Prénom NOM Fonction ORGANISME.
1 Tutoriel SPIP Rédacteur. 2 Sommaire Connexion Interface SPIP Menu SPIP Rédiger un article Interface de création d’un article Fonctionnalités de base.
Samuel Lefebvre Emilie Houel Mohamed Vall Mohamed Vall Fateh Titouche
Le forum Comment ca marche? (Cliquez pour défiler)
Vous voici dans notre site « laboratoire » pour la démonstration AJOUTER UNE PAGE Cliquez sur ENTREZ ICI pour accéder à la partie administration.
Site Internet * Référencement * Accueil * Fonctionnalités générales * Forum * Statistiques Adresse :
Formation Didapages Gilles BADUFLE À partir d’un PPT modifié du C.A.H.M.
SSPT – CHOPIN niveau 1 Système de gestion de contenu de sites web Par : Liette Pothier, chargée de projet Nancy Dodier, technicienne en informatique.
Enregistrement sur le Forum de l’association. A partir de la page d’accueil du site Web, cliquer sur le lien « Forum » dans l’entête de la page.
Webmarketing 13 octobre 2015.
Language html Hyper Text Markup Language
Co-organisé avec Sous le parrainage de Un événement Titre de votre session Votre logo à insérer ici Prénom NOM Fonction ORGANISME.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Bloc 1 - UE 5 - Technologies de l’information et de la communication TIC Bachelier en immobilier T. SOUMAGNE.
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
LA PUBLICATION SUR ELYCO 1.Organisation visuelle de l’information sur le site (Charte graphique, identité numérique) 2.Amélioration de la qualité et la.
Réussir un diaporama S. Pignon –
Mise à jour en février 2013 Ecrire un commentaire Accéder au tableau de bord Changer son mot de passe Écrire un nouvel article Importer une image Publier.
Transcription de la présentation:

SITE INTERNET « les fans de la ruelle en chantier »

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

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…

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

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

Charte graphique Nous nous sommes inspirées du site :

Nous nous sommes inspirées du forum : Charte graphique

Nous nous sommes inspirées du myspace : Charte graphique

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.

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

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.

Structure du site Arborescence Site SUITE

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

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)

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…

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

La bannière

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

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

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

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.

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.

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.

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

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.

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

FIN