Gadgets

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/pdf-wrapper.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 d'un des fichiers Google Sheet suivant:
_Carrousel template Google Site ESSEC
_Carrousel template Google Site ESSEC Singapore
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=1et 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_CEMAS

Explications:
Se connecter à son compte Twitter
Aller dans Paramètres > Widgets > Créer un widget
Choisir le type de flux à afficher (profil, statut, timeline,...)
Paramétrer sa mise en forme
Copier le code généré par Twitter
Création de widgets - Accès rapide

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)

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



PDF Wrapper (.pdf)

PDF Wrapper Test

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

Explications:
Ce gadget permet d'afficher sur le site des PDF hébergés sur Google Drive
(ex de lien: https://googledrive.com/host/0B1iqp0kGPjWscTRnV3I3VURYdzA/reading.pdf)
NB: concernant les fichiers hébergés sur Google Drive, penser à partager les documents en mode "Accessible au public"

En savoir plus
Hébergement de fichiers sur Google Drive



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 adaptés aux Google Sites

Page de Mori 79
Tips & Tricks
Google Gadgets - The swiss army knife for Google Sites

ċ
carrousel-Jssor-Gadget.xml
(28k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ą
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
dynamic-content-writer.xml
(3k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
flux-twitter.xml
(0k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
google-docs-viewer.xml
(2k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
iframe-agenda.xml
(2k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ą
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ą
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ą
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
pdf-wrapper.xml
(1k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
scrolling-text.xml
(2k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46
ċ
web-redirection.xml
(60k)
Marie-Hélène RAVARY,
14 sept. 2017 à 01:46