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
Pour que les gadgets fonctionnent, il faut 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
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
https://sites.google.com/a/essec.edu/***NOM-DE-MON-GOOGLE-SITE***/gadgets/dynamic-content-writer.xml
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
Exemples de fichier Google Sheet
Les fichiers suivants permettent de gérer les contenus textes, images et liens affichés dans le carrousel.
_Carrousel template Google Site ESSEC
_Carrousel template Google Site ESSEC Singapore
Galerie Photos / Diaporama - Google Photos / Google +
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&wkst=1&bgcolor=%23FFFFFF&src=fr.french%23holiday%40group.v.calendar.google.com&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&wkst=1&bgcolor=%23FFFFFF&src=fr.french%23holiday%40group.v.calendar.google.com&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.
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
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,...)
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
PDF Wrapper (.pdf)
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"
Hébergement de fichiers sur Google Drive
Dynamic Content Writer
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.