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

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

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

Documentation

Fichiers en ligne

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é:

Partie du code iframe à copier (Ctrl + C):

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

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 :

<![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,...)

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)

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.

Plus d'informations

Autres gadgets adaptés aux Google Sites

Report abuse