Dynamiser Google Sites

Intégrer du code

Google Sites représente une excellente alternative lorsqu'on souhaite créer rapidement un site web de belle allure rapidement et sans programmation. Cependant, les options sont interactives sont assez limitées. Ainsi, lorsqu'on voudra insérer un tant soit peu dl'interaction, on devra intégrer du code.

Heureusement pour nous, il est possible de copier-coller du code existant que l'on aura glané auprès de banques de code en ligne ou en les extrayant d'autres sites web. À titre d'exemple, vous trouverez ci-dessous quelques un des scripts qui vous seront des plus utiles.

Mais en premier, pour insérer un code dans notre Google Site, on suit la procédure suivante :

Dans le menu Insérer de la barre latérale, cliquer sur l'option Intégrer.
Dans la boîte de dialogue qui apparaît, choisir Intégrer le code.
Copier-coller le code désiré dans la zone de texte.

1. Insérer une zone de texte dynamique

Le code à insérer est :

<textarea style="

margin: 0 auto;

/* largeur et hauteur de la zone de texte */

width: 540px;

height: 250px;

padding:5px;

vertical-align: top;

font: 1em sans-serif;

line-height:150%;

border: 1px dotted #999;

resize: none;

/* couleur du texte */

color:cornflowerblue;">

</textarea>

2. Insérer une zone de texte en forme de téléphone ou de tablette

<textarea style="

margin: 0 auto;

/* largeur et hauteur de la zone de texte */

width: 280px;

height: 500px;

margin-left:35px;

vertical-align: top;

font: 1em sans-serif;

line-height:150%;

outline: none;

border: 1px solid black;

padding: 20px 20px 20px 20px;

border-radius: 22px;

resize: none;

box-shadow: 1px 1px 8px #888888;

/* couleur du texte */

color:cornflowerblue;

/* le background permet d'afficher le bouton du iPhone */

background: url(https://cdn4.iconfinder.com/data/icons/geomicons/32/672342-circle-512.png) center bottom no-repeat;

background-size:40px;

background-position: 50% 98%;

">

</textarea>

4. Insérer des boutons radio ou des cases à cocher

<style>

.form-radio

     -webkit-appearance: none;

     -moz-appearance: none;

     appearance: none;

     display: inline-block;

     position: relative;

     background-color: #f1f1f1;

     color: #666;

     top: 10px;

     height: 30px;

     width: 30px;

     border: 0;

     border-radius: 50px;

     cursor: pointer;

     margin-right: 7px;

     outline: none;

.form-radio:checked::before

     position: absolute;

     font: 13px/1 'Open Sans', sans-serif;

     left: 11px;

     top: 7px;

     content: '\02143';

     transform: rotate(40deg);

.form-radio:hover

     background-color: #f7f7f7;

.form-radio:checked

     background-color: #f1f1f1;

label

     font: 300 16px/1.7 'Open Sans', sans-serif;

     color: #666;

     cursor: pointer;

</style>

<input type="radio" name="demo" value="un" id="radio-un" class="form-radio"> <label for="radio-un">Bouton radio 1</label>

<br><input type="radio" name="demo" value="deux" id="radio-deux" class="form-radio"> <label for="radio-deux">Bouton radio 2</label>

<br><input type="radio" name="demo" value="trois" id="radio-trois" class="form-radio"> <label for="radio-trois">Bouton radio 3</label>

<style>

.form-check

     -webkit-appearance: none;

     -moz-appearance: none;

     appearance: none;

     display: inline-block;

     position: relative;

     background-color: #f1f1f1;

     color: #666;

     top: 10px;

     height: 30px;

     width: 30px;

     border: 0;

     border-radius: 3px;

     cursor: pointer;

     margin-right: 7px;

     outline: none;

.form-check:checked::before

     position: absolute;

     font: 13px/1 'Open Sans', sans-serif;

     left: 11px;

     top: 7px;

     content: '\02143';

     transform: rotate(40deg);

.form-check:hover

     background-color: #f7f7f7;

.form-check:checked

     background-color: #f1f1f1;

label

     font: 300 16px/1.7 'Open Sans', sans-serif;

     color: #666;

     cursor: pointer;

</style>

<input type="checkbox" name="demo" value="un" id="check-un" class="form-check"> <label for="radio-un">Case à cocher 1</label>

<br>

<input type="checkbox" name="demo" value="deux" id="check-deux" class="form-check"> <label for="radio-deux">Case à cocher 2</label>

<br>

<input type="checkbox" name="demo" value="trois" id="check-trois" class="form-check"> <label for="radio-trois">Case à cocher 3</label>

5. Insérer un lien vers une adresse de courriel

On retrouve habituellement 3 façons d'insérer un lien vers la messagerie électronique : on peut insérer un lien dans un texte, on peut créer un bouton ou on peut créer une zone de texte qui sera envoyée par messagerie.

Dans cette phrase, cliquez ici pour envoyer un courriel.

On sélectionne le texte qui servira de lien. Dans le menu contextuel qui apparaît, on clique sur le bouton Insérer le lien.

Écrire et envoyer un courriel

La méthode la plus simple consiste à Insérer un bouton (volet de droite) et d'inscrire dans la zone Lien mailto:adresse@courriel.com

Toutefois, si pour notre besoin pédagogique il faut faire écrire le courriel à l'écran, on intégrera plutôt un code comme le suivant :

<style>

form {

  margin: 0 auto;

  width: 600px;

font-family: Arial, Helvetica, sans-serif;

    color:dimgrey;

div + div {

  margin-top: 1em;

label {

  display: inline-block;

  width: 90px;

  text-align: right;

input, textarea {

  font: 1em sans-serif;

  color:gray;

  line-height:150%;

  color:cornflowerblue;

  width: 600px;

  padding:5px;

  -moz-box-sizing: border-box;

       box-sizing: border-box;

  border: 1px dotted #999;

input:focus, textarea:focus {

   border: 1px solid;

textarea {

  vertical-align: top;

  height: 5em;

  resize: none;

    height: 250px;

.button {

  padding-left: 90px; /* same size as the label elements */

button {

  margin-left: .5em;

.button {

    background-color: #000000;

    border: none;

    color: white;

    padding: 10px 45px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

</style>

<form action="mailto:" method="post" enctype="text/plain">

  Objet :<br />

  <input name="subject" type="text"/><br /><br/>

  Message :<br/>

  <textarea name="body"></textarea><br />

   <br/>

  <input type="submit" value="Envoyer" class= "button"/>

</form>

6. Code QR pour interaction avec un téléphone cellulaire ou une tablette

Il peut être intéressant d'amener l'adulte à utiliser son téléphone ou sa tablette de façon utilitaire en classe. Le code QR permet de faire lire un texte à son écran ou à lui faire afficher un site web.

Pour créer un code QR, on procède de la façon suivante :

On ouvre un site web qui permet de générer un code QR. Par exemple, le site https://www.the-qrcode-generator.com/ convient parfaitement.
Dans ce site, on choisit ce que l'on souhaite créer (un texte ou un lien vers un site web).
On colle (ou on inscrit) le texte ou l'adresse du lien et on génère le code QR que l'on enregistre par la suite (c'est une image).
Dans Google Site, on choisit d'insérer une image et on sélectionne l'image du code QR que l'on vient de sauvegarder.
Enfin, on s'assure que l'adulte dispose d'une application lecteur de code QR dans son téléphone ou sa tablette (ces applications sont gratuites).

7. Lecteur audio

Dans le cas de la compréhension orale, il est possible d'intégrer un petit lecteur audio. Cependant, il faudra que le fichier audio (.mp3) se trouve dans Internet. Actuellement (novembre 2018), Google Sites ne peut pas lire directement les fichiers audio stockés en infonuagique (comme dans Google Drive, One Drive ou Dropbox).

Le code à insérer est :

<span style="float:right;">

<audio controls>

  <source src="http://idclique.com/sites/pignon.mp3" type="audio/mpeg">

</audio>

</span>

Voilà qui fait un bref survol des codes et autres items que l'on peut insérer dans un Google Site. Selon vos goûts, intérêts et surtout en fonction de vos besoins avec les approches technopédagogiques, rien ne vous empêche d'aller plus avant dans ce fabuleux monde!

Si tel est le cas, les quelques liens suivants vous seront de fidèles alliés :

Alain Dumais, CSMB pour Alexandrie FGA

Report abuse