Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Création de sites Web - Google Sites

No description
by

Marie-Luce Beraudo

on 19 November 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Création de sites Web - Google Sites

La création de sites Web
avec Google Sites
2. Comment créer un site avec Google Sites ?
E. Partager le site
E. Partager le site (suite)
E. Partager le site (suite bis)
C. Les modèles de page
B. Exemple de création de site :
un Intranet pour une entreprise
A. Pour démarrer
A. Les avantages de Google Sites
Google Sites est...
1. Qu'est-ce que Google Sites ?
Une application Google au même titre que Gmail, Google Agenda, Google Drive...
Son objectif est de créer des sites Web collaboratifs facilement
Possibilité d’intégrer les autres produits Google : documents Google Docs, Google AdSense, photos Picasa, agenda Google
Gratuit
Gratuit
A la portée de tous : pas besoin de connaître le HTML
Aspect collaboratif (Intranet, Wiki...)
Gestion du contrôle d’accès
Nécessaire d'avoir un compte Google (exemple : Gmail)
Utile de connaître les applications Google
Utile de connaître le HTML
Pas de niveau technique requis
Page d'accueil
Page Blog
Page Evénements (agenda)
Page informative sur les 10 ans de l'entreprise
Fonctionne comme un blog
Permet de créer des annonces et de les afficher de la plus récente à la plus ancienne
Site public et accessible via le lien et la recherche
Site public et accessible via le lien seulement
Site privé et accessible uniquement via la connexion Google
12 décembre 2012
Sommaire
1. Qu'est-ce que Google Sites ?
2. Comment créer un site Web avec Google Sites ?
3. La réalisation d'un site Web - En amont
4. Cas pratique - thème au choix
5. La réalisation d'un site Web - En aval
B. Les inconvénients de Google Sites
Limites dans la construction du site si on ne connaît pas le HTML (design)
Limites dans les fonctionnalités : pas de contrôle total
Ne fonctionnera pas pour un « gros » site complexe (e-commerce…)
Pas de nom de domaine propre par défaut (http://sites.google.com/site/monsite)
C. Pourquoi utiliser Google Sites ?
Budget limité/inexistant : Google Sites revient moins cher qu'un site développé par un professionnel
Besoin d’un outil collaboratif simple : permet d'éviter un outil type Sharepoint (plus complexe et plus cher)
Goût des applications Google
C. Les modèles de page (suite)
Permet de créer une liste d’informations et de l’organiser en différentes colonnes
Les lecteurs peuvent trier les informations par colonne
1. Le thème :
D. Les thèmes et modèles de site
La personne peut, en plus des droits ci-dessus :
- modifier le thème/titre du site
- accorder des droits aux utilisateurs
- supprimer le site
Les notifications de mises à jour de la page
Les notifications de mises à jour du site
Les notifications spécifiques à la page classeur
La création de sites Web
Google Sites
2. Comment créer un site avec Google Sites
3. Comment partager un site réalisé avec Google Sites ?
A. Les types d'accès
B. Les droits des utilisateurs
C. Les notifications de mise à jour
D. Les modèles de page
B. Exemple de création de site :
un Intranet pour une entreprise
A. Pour démarrer
A. Les avantages de Google Sites
Google Sites est...
1. Qu'est-ce que Google Sites ?
Une application Google au même titre que Gmail, Google Agenda, Google Drive
Son objectif = créer des sites Web collaboratifs facilement
Possibilité d’intégrer les autres produits Google : documents Google Docs, Google AdSense, photos Picasa, agenda Google Agenda
Gratuit
Gratuit
A la portée de tous : pas besoin de connaître le HTML
Aspect collaboratif (Intranet)
Gestion du contrôle d’accès
Nécessaire d'avoir un compte Google (exemple : Gmail)
Utile de connaître les applications Google
Utile de connaître le HTML
Pas de niveau technique requis
Informations concernant le repas de noël de l'entreprise
Les événements à venir
Page

Rentrer le nom du site
Rentrer l'url du site
Attention ! Vous ne pourrez pas modifier l'url une fois que le site aura été créé
Choisir un thème/modèle (pas obligatoire)
Cocher éventuellement la case "Le contenu de ce site est réservé à un public adulte"
Rentrer le code de sécurité
Limites de stockage :
100Mo par site
Nombre de pages illimité
La page d'annonces
Fonctionne comme un blog
Permet de créer des annonces et de les afficher de la plus récente à la plus ancienne
Site public et accessible via le lien et la recherche
Site public et accessible via le lien seulement
Site privé et accessible uniquement via la connexion
12 décembre 2012
Sommaire
1. Qu'est-ce que Google Sites ?
2. Comment créer un site Web avec Google Sites ?
3. La réalisation d'un site Web - En amont
4. Cas pratique
5. La réalisation d'un site Web - En aval
B. Les inconvénients de Google Sites
Limites dans la construction du site si on ne connaît pas le HTML (design)
Limites dans les fonctionnalités : pas de contrôle total
Ne fonctionnera pas pour un « gros » site complexe (e-commerce…)
Le site appartient à Google
Pas de nom de domaine propre par défaut (http://sites.google.com/site/monsite)
C. Pourquoi utiliser Google Sites ?
Budget limité/inexistant
moins cher qu'un site développé par un professionnel
Besoin d’un outil collaboratif simple
permet d'éviter un outil type Sharepoint (plus complexe et plus cher)
Goût des applications Google
C. Les étapes de la création d'un site
Le classeur
Permet un partage de fichiers entre différents utilisateurs
On peut stocker des fichiers téléchargés depuis son ordinateur et les organiser
On peut recevoir des notifications de mise à jour si des fichiers sont ajoutés, supprimés ou modifiés
D. Les modèles de page (suite)
La page de liste
Permet de créer une liste d’informations et de l’organiser en différentes colonnes
Les lecteurs peuvent trier les informations par colonne
1. Le thème :
Un thème correspond à une charte graphique avec des critères définis : couleur de fond, police…
2. Le modèle de site :
Ne pas confondre avec le modèle de page
Un modèle a souvent été créé par un auteur de site
Un modèle ne contient pas qu’un graphisme spécifique mais aussi des fonctionnalités (applications) ; il est déjà pré-rempli
Vous ne pourrez pas véritablement changer le modèle du site une fois qu’il sera créé
E. Les thèmes et modèles de site

"Consultation autorisée" : la personne peut consulter les pages
"Modification autorisée" : la personne peut modifier, supprimer, ajouter ou déplacer des pages ; ajouter des pièces jointes/commentaires ; s'abonner aux mises à jour
"Propriétaire" : la personne peut, en plus, modifier le thème/titre du site, accorder des droits aux utilisateurs, supprimer le site
Les mises à jour de la page
Les mises à jour du site
(A utiliser avec modération)
C. La charte graphique
Brainstorming
Papier et crayon
Outils de bureautique (Word, Powerpoint...)
Outils de graphisme (Gimp, Illustrator, Fireworks...)
Outils spécialisés (Xmind, Slickplan...)
Règles définissant l'identité graphique d'une entreprise/marque/projet/site Web
Le plus souvent matérialisé sous forme d'un document
Ne pas confondre avec une maquette graphique
A. Définir l'arborescence d'un site Web
Classifier le contenu
Définir des rubriques et sous-rubriques
Navigation plus efficace - meilleure ergonomie
Communication au sein de l'équipe
B. Créer un wireframe
(suite)
Papier et crayon
Outils de bureautique (Powerpoint...)
Outils de graphisme (Fireworks, Gimp...)
Outils spécifiques (Mockingbird, Balsamiq...)
Le wireframe peut être statique ou fonctionnel
Au minimum un wireframe pour la page d'accueil et un autre pour les pages internes
B. Créer un wireframe
(maquette fil de fer)
Permet de définir l'aspect fonctionnel d'un site Web
Sert d'ébauche à une maquette graphique
Communication au sein de l'équipe
A. Définir l'architecture d'un site Web
A. Définir l'arborescence d'un site Web (suite)
Règles concernant l'utilisation du logo, des images, de l'identité visuelle de l'entreprise
Règles concernant les polices de caractères pour chaque type de texte (paragraphe, titre, sous-titre, lien, lien de menu...)
Règles concernant les espacements (marges) internes et externes
Règles concernant les couleurs (codes couleur définis)...

Document réalisé avec un outil de traitement de texte
Distribution du document au sein de l'équipe
Suivi régulier en aval
Créez votre propre site Web (thème libre) avec Google Sites en respectant les contraintes suivantes :

Le site doit comporter plusieurs pages (au moins deux)
Le site doit comporter au moins une application Google
Le site doit comporter au moins une image
Le site doit comporter au moins un lien
C. La charte graphique (suite bis)
C. La Charte graphique (suite)
5. La réalisation d'un site Web - en aval
A. Le nom de domaine
C. Google Analytics
B. Le référencement
Possible de le rediriger vers un projet Google Sites
Plus professionnel
Peut être réutilisé
Suivre la procédure Google Sites
Choix de l'extension : .com, .fr, .eu, .org...
Connexion à Google Analytics via compte Google
Ajout du site sur Google Analytics
Activation de Google Analytics sur Google Sites
Un contenu riche et de qualité
Intégration de mots-clés dans les titres
Penser à l'utilisateur avant tout
Ne pas confondre avec le modèle de page
Un modèle a souvent été créé par un auteur de site
Un modèle ne contient pas qu’un graphisme spécifique mais aussi des fonctionnalités (applications) ; il est déjà pré-rempli
Le modèle se choisit au moment de la création du site
Un thème correspond à une charte graphique avec des critères définis : couleur de fond, police…
Un thème peut être changé après la création du site
2. Le modèle de site :
Consultation autorisée
La personne peut consulter les pages
Modification autorisée
La personne peut :
- modifier, supprimer, ajouter ou déplacer des pages
- ajouter des pièces jointes/commentaires
- s'abonner aux mises à jour
Propriétaire
1. Pourquoi une arborescence ?
2. Comment définir une arborescence ?
1. Qu'est-ce qu'un wireframe ?
Schéma d'une page Web
Définit les différentes zones et fonctionnalités d'une page
Ne pas confondre avec une maquette graphique
2. Pourquoi un wireframe ?
3. Comment créer un wireframe ?
1. Qu'est-ce qu'une charte graphique ?
2. La charte graphique d'un site Web
3. Pourquoi une charte graphique ?
Permet de respecter une cohérence graphique même si de nombreux intervenants sont impliqués
Respecte l'identité visuelle de l'entreprise
Meilleure qualité de communication
4. Comment faire une charte graphique ?
1. Qu'est-ce que le référencement ?
Rendre un site Web le plus accessible possible via les outils de recherche
2. Dans quel cas est-ce utile ?
Site Web externe/site vitrine
3. Comment l'optimiser ?
1. Pourquoi utiliser Google Analytics ?
Suivre l'évolution du trafic au jour le jour
Apporter des améliorations au site si besoin
2. Comment paramétrer Google Analytics ?
Merci pour votre attention !
2. La page d'annonces
Permet un partage de fichiers entre différents utilisateurs
On peut stocker des fichiers téléchargés depuis son ordinateur et les organiser
On peut recevoir des notifications de mise à jour si des fichiers sont ajoutés, supprimés ou modifiés
3. Le classeur
1. La page classique
Aucune fonctionnalité particulière
S'utilise pour la plupart des pages
4. La page de liste
(A utiliser avec modération)
1. Les types d'accès :
2. Les types de droits
3.Les notifications de mise à jour
Les outils les plus simples sont souvent les meilleurs.
Création d'un nom de domaine propre (www.monsite.com)
3. La réalisation d'un site Web - en amont
4. Cas pratique - La réalisation d'un site Web
Full transcript