Gadgets

Tutoriels Google sites

Créer, modifier, partager ou supprimer un Google site
Tutoriel Google site classique (version EN) | Tutoriel Google site nouvelle version (version EN)



Console d'édition

Parfois, MyESSEC déconnecte les Google Apps de votre profil.
Cela a pour effet que les boutons permettant de modifier votre site web ne s'affichent pas.

Pour vous reconnecter à vos applications et avoir de nouveau les options de modification de votre Google Site, vous devez:
- Vous connecter à MyESSEC
- Cliquer sur le lien "Sites" juste à gauche de la photo de votre profil
- Actualiser / rafraîchir votre site Google (touche F5)
Suite à ces actions, l'ensemble des options d'édition de votre Google Site réapparaissent.

NB: La console d'édition n'est présente que si vous accéder à votre site par le biais de l'URL d'origine de type https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/
Si vous accédez à votre site web par le biais de l'URL raccourcie de type https://***NOM-DE-MON-GOOGLE-SITE***.essec.edu/, la console d'édition ne pourra pas s'afficher.



Modifier la langue du back office des Google Sites

Votre console d'édition n'est pas paramétrée dans la langue souhaitée.

Pour modifier la langue des menus d'édition de votre Google Site :
- Connectez vous à MyESSEC
- Cliquez sur le lien "Sites" juste à gauche de la photo de votre profil
- Cliquez ensuite sur la roue crantée située en haut à droite sous votre photo de profil Google Apps
- Le menu "User settings ou Paramètres utilisateur" vous permettra de configurer la langue des menus de la console d'édition
- Sélectionnez la langue désirée
- Sauvegardez les modifications effectuées.



Retouches d'images avec GIMP

Redimensionner, recadrer, retourner une image, écrire sur une image, etc.

NB: les gifs animés ne fonctionnent pas lorsqu'ils sont hébergés sous Google Site.
Pour que l'animation soit visible il faut ajouter "?attredirects=0" après l'extension .gif

Consulter les explications et les tutoriels concernant le logiciel



Méthodologie des gadgets

Pour que les gadgets fonctionnent correctement, il faut que les paramètres de partage du Google Site soient en "Activé : toutes les personnes disposant du lien" ou "Activé : public".

Ne supprimez pas la page Gadgets de votre Google Site, cela aurait pour effet de supprimer l'ensemble des gadgets proposés ici.
Vous pouvez la masquer de votre arborescence et vous pourrez y accéder ensuite par le biais du menu "Gérer le site" / "Pages".

Il faut également remplacer ***NOM-DE-MON-GOOGLE-SITE*** par le nom de votre site web.
Regardez dans la barre de navigation l'adresse indiquée quand vous êtes sur la page d'accueil :
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/

Les Gadgets disponibles sont les suivants :
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/carrousel-Jssor-Gadget.xml
Galerie Photos / Diaporama
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/scrolling-text.xml
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/web-redirection.xml
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/iframe-agenda.xml
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/flux-twitter.xml
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/google-docs-viewer.xml
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/embed-video.xml
Moteur de recherche
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/dynamic-content-writer.xml
Autres gadgets adaptés aux Google Sites

Si vous déplacez la page gadgets sur votre Google Site, il faudra modifier l'URL des gadgets en conséquence.

Pour insérer un gadget, il faut aller dans le menu "Insertion"
Puis cliquer sur "Autre gadget..."
Puis "Ajouter un gadget à partir de sont URL"

Coller ensuite l'URL qui convient en fonction du gadget à mettre en place
Paramétrer ensuite le gadget



Carrousel Homepage

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/carrousel-Jssor-Gadget.xml

Ressources
Documentation
Fichiers en ligne

Mettre en place le fichier Google Sheet sur le site web
Créer une copie du fichier Google Sheet suivant:
_Carrousel template Google Site ESSEC
Modifier les paramètres de partage du fichier ainsi dupliqué, afin de permettre que le carrousel s'affiche correctement sur le Google Site où il va être implanté.
Cocher "Accès en lecture à toute personne disposant du lien" (obligatoire pour que le Google Site puisse accéder à la feuille Google Sheet), puis enregistrer.
Copier (CTRL + C) l'adresse du fichier Google Sheet à afficher sur la homepage du Google Site (attention les URL des onglets "Site FR" ou "Site EN" ne sont pas les mêmes).
Exemple d'URL: https://docs.google.com/spreadsheets/d/1xLptKFRKrNLTBKZEkne514nr12DXP_RdhwfQmLk5kFA/edit#gid=0
En vert, la partie d'URL qui nous intéresse.
Éditer la page du Google Site qui contient le carrousel.
Configurer le gadget du carrousel.

Dans le champ "Clé du tableur" saisir l'URL précédemment copiée (la partie en vert), puis sauvegarder.
Enregistrer les modifications apportées à la page.

Gestion des contenus du Carrousel
Le fichier Google Sheet permet de gérer les contenus textes, images et liens affichés dans le carrousel, ainsi que le nombre de slides en rotation.
Il n'y a pas de restriction du nombre de slides présents dans le carrousel, ajouter des lignes au fichier si besoin.
Pour un meilleur rendu, les images affichées dans le carrousel du Google Site doivent être de dimensions 1200 x 300 pixels.
Utiliser Gimp pour adapter l'image au bon format.
Les modifications apportées au fichier sont enregistrées automatiquement et s'affichent instantanément sur la page où le gadget est intégré.

Héberger les images du carrousel sur le Google Site, soit à la racine du site, soit sur la page d'accueil du site par le biais du menu Gérer le site / Pièces jointes / Importer.
Les images pourront être alors modifiées, renommées, remplacées à partir de ce menu, si besoin.
L'URL de l'image à insérer dans le carrousel Google Sheet peut être récupérée en faisant un clic droit sur le lien "Télécharger", puis "Copier l'adresse du lien", dans le menu Gérer le site / Pièces jointes.

Coller l'adresse ainsi copiée dans le fichier Google Sheet du carrousel, dans la colonne Url Image.
Cette URL se présente sous la forme https://sites.google.com/a/essec.edu/template-google-site/home/MON-IMAGE.jpg?attredirects=0&d=1
Supprimer ce qui se situe après l'extension du fichier ?attredirects=0&d=1 et ne conserver que l'adresse correspondant à l'image https://sites.google.com/a/essec.edu/template-google-site/home/MON-IMAGE.jpg
Les images peuvent être au format .jpg, .png et .gif (non animée).



Galerie Photos / Diaporama - Google Photos / Google +

Blasons ESSEC - Galerie Photos - Diaporama

Explications
- Créer un album photos sous Google Photos (anciennement Picasa).
- Partager cet album en mode public, à l'aide de l'outil Event Gallery.
Après s'être connecté au compte Google qui convient, cliquer "Make Public" sur l'album souhaité.
Sous Google Site, se positionner à l'endroit désiré pour intégrer le diaporama en mode édition.
Dans le menu "Insertion" sélectionner Google+ / Album photos.
Choisir l'album photos à afficher sur la page, paramétrer les options disponibles (dimensions, titre, etc.), puis enregistrer les modifications effectuées.



Scrolling text

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/scrolling-text.xml

Explications:
Une fois le gadget inséré dans la page, paramétrer les options disponibles (taille / couleur de la police, couleur du fond, direction / vitesse du scroll), puis enregistrer les modifications effectuées.



Redirection

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/web-redirection.xml

Explications:
Il est possible de rediriger une page vers une autre page ou vers un autre site internet.
Pour se faire, ajouter dans votre page le gadget web-redirection.xml.
Une fois le gadget en place sur la page à rediriger, paramétrer vers quelle page renvoyer l'internaute, puis enregistrer les modifications effectuées.



Google Agenda

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/iframe-agenda.xml

Explications:
Se connecter à MyESSEC pour pouvoir afficher et sélectionner le Google Calendar à mettre en ligne.
Accéder aux paramètres et options d'intégration
Personnaliser l'affichage de l'agenda selon vos besoins (dimensions, couleur, titre,...)
Sélectionner et copier une partie du code HTML ainsi généré

Exemple de code HTML généré:
<iframe src="https://calendar.google.com/calendar/embed?height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=fr.french%23holiday%40group.v.calendar.google.com&amp;color=%23B1365F" style="border-width:0" width="500" height="300" frameborder="0" scrolling="no"></iframe>

Partie du code iframe à copier (Ctrl + C):
<iframe src="https://calendar.google.com/calendar/embed?height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=fr.french%23holiday%40group.v.calendar.google.com&amp;color=%23B1365F" style="border-width:0" width="500" height="300" frameborder="0" scrolling="no"></iframe>

Retourner sur la page où afficher l'agenda
Insérer le gadget iframe-agenda.xml à l'endroit désiré
Coller (Ctrl + V) le code HTML précedemment copié dans le champ "URL to content (obligatoire)"
Paramétrer l'affichage du calendrier dans la page, puis enregistrer les modifications effectuées

NB: l'accès aux paramètres et au code iframe de l'agenda peut également se faire directement sur l'agenda.

Plus d'infos (en anglais)



Flux Twitter

Exemple de Flux Twitter @ESSEC


Explications:
Gadget XML à compléter avec le code généré par Twitter:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/flux-twitter.xml

Télécharger le fichier XML "flux-twitter.xml"
Ouvrir et modifier le fichier XML grâce à l'application Bloc-Notes (PC) ou Text Wrangler (Mac)

Accéder à la page suivante : https://publish.twitter.com/
Sélectionner le type de flux Twitter à afficher sur le site (tweet, bouton, timeline, etc.)
Coller l'URL du flux Twitter à afficher (ex: https://twitter.com/ESSEC)
Paramétrer la mise en forme du flux (dimensions, langue, couleur)
Copier le code généré par Twitter
Coller le code dans le fichier XML

Le fichier XML se présente de comme suit :
<Module>
<ModulePrefs title="Twitter"/>
<Content type="html">
<![CDATA[
Replace this entire line with the code generated from the twitter widgets page
]]>
</Content>
</Module>

Remplacer le texte en vert par le code donné par Twitter
Enregistrer le fichier XML
Accéder aux pièces jointes de votre Google Site
Remplacer le fichier flux-twitter.xml vierge par celui dernièrement configuré

Intégrer le gadget à l'endroit désiré sur le site en suivant la méthodologie décrite dans le premier paragraphe de cette page

Plus d'infos (en français)
Plus d'infos (en anglais)

Explications Flux FB, Pinterest, Google+, Instagram:
http://www.chalifour.net/marketing-interactif/comment-integrer-facebook-twitter-google-pinterest-instagral-ou-linkedin-sur-un-blogue-ou-un-site/



Google Docs Viewer (.ppt, .pdf, .doc,...)

Google Docs Viewer Test

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/google-docs-viewer.xml

Explications:
Ce gadget permet d'intégrer des fichiers PDF, DOC ou PPT hébergés dans les pièces jointes du site, directement dans la page du site
Insérer le gadget à l'endroit désiré sur le site
Entrer l'URL du document à afficher
(ex de lien: https://sites.google.com/a/essec.edu/template-google-site/docs/presentation-chaire.pdf)
Paramétrer l'affichage du gadget, puis enregistrer les modifications effectuées

Plus d'infos



Vidéo hébergée dans les pièces jointes du Google Site (max 20 Mo)

Embed Vidéo

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/embed-video.xml

Explications:
Ce gadget permet d'intégrer des vidéos au format .mp4, .mpeg, .avi, hébergées dans les pièces jointes du Google Site
Les vidéos doivent être d'un poids maximal de 20Mo
Si votre vidéo est plus lourde, il faudra l'héberger et la mettre en ligne par un autre moyen (Google Drive, Youtube, etc.)

Dans un premier temps créez la miniature / vignette correspondant à l'image qui s'affichera avant que la lecture de la vidéo ne soit lancée
ex: embed-video.jpg

- Uploadez votre vidéo et votre image de miniature dans les pièces jointes de votre site web
- Récupérez les URLs de celles-ci, vous en aurez besoin par la suite
cf. clic droit sur le lien "Télécharger", "Copier l'adresse du lien"
URL sous la forme https://sites.google.com/a/essec.edu/template-google-site/gadgets/embed-video.jpg?attredirects=0&d=1
Supprimer ce qui se situe après l'extension ?attredirects=0&d=1 , ne conserver que l'adresse correspondant à l'image ou à la vidéo https://sites.google.com/a/essec.edu/template-google-site/gadgets/embed-video.jpg

- Insérez le gadget embed-video.xml à l'endroit désiré sur votre site web
- Paramétrez l'affichage du gadget (dimensions, titre, mise en forme)

Copiez le code suivant et insérez le dans le champ "Embedding snippet"
<video id="myMovie" width="560" height="315" poster="https://sites.google.com/a/essec.edu/template-google-site/gadgets/embed-video.jpg" controls >
<source src="https://sites.google.com/a/essec.edu/template-google-site/gadgets/embed-video.mp4" type="video/mp4">
</video>

Personnalisez le champ "Embedding snippet" à l'aide des URLs de vos contenus récupérées plus tôt (image miniature et vidéo).
- poster="" correspond à l'URL de votre image miniature
- source src="" correspond à l'URL de votre vidéo
- width="" doit avoir les mêmes dimensions que "Affichage / Largeur"
- height="" doit avoir les mêmes dimensions que "Affichage / Hauteur"

- Enregistrez les modifications effectuées

Plus d'infos



Moteur de recherche

Pour afficher / masquer le moteur de recherche présent sur les Google Sites :
- Accéder à la gestion et aux paramètres du site.
- Menu général.
- Descendre jusqu'à l'option "Activer et configurer les options de recherche", cliquer sur "Configurer la recherche".
- Cocher les options souhaitées puis valider avec le bouton OK.
- Enregistrer la modification effectuée.



Dynamic Content Writer

Dynamic Content Writer Test

Gadget:
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/dynamic-content-writer.xml

Explications:
Ce gadget permet de coder en temps réel directement dans la page, afin de tester les contenus avant de les mettre en ligne.
Plus d'informations



Autres gadgets et tutoriels adaptés aux Google Sites

Page de Mori 79
Tips & Tricks
Google Gadgets - The swiss army knife for Google Sites
Google Sites FAQ (Frequently Asked Questions)
Get started writing Gadgets
Google Sites - Trucs et astuces pour créer son site

ċ
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
č
embed-video.mp4
(14734k)
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
ą
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46
ċ
Nina Edalat,
11 sept. 2019 à 02:46