Mémo 14 (atelier informatique du 18/11/2015) : Création du Blog - Insertion zone de texte, PDF, tableau, site dans le blog

Utilisation de Google Drive:

• Accéder à Google Drive

• Créez un compte google et/ou connectez-vous

• créer/importer un dossier

• ajouter des fichiers

• créer des documents,textes, tableurs, présentations...

• Partager les fichiers et les dossiers

Utiliser le menu contextuel

Partage - mode avancé

résultat et lien de partage

Intégrer des documents stockés sur Google Drive

MÉTHODE : vous aurez à copier/coller du code, puis le modifier.  vous pouvez utiliser le bloc notes pour réaliser ces opérations (voir ci-dessus). Lorsque le code est finalisé, il suffit de le coller dans l'article de Blogger, en mode HTML 

Télécharger ou créer le fichier sur Google Drive, puis le partager afin d'obtenir son URL du type :

https://drive.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/view?usp=sharing 

Dans l’URL copiée la partie en fluo jaune représente l’identifiant du fichier partagé. Il s'agit de la partie entre les 2 slashs /IDENTIFIANT/, Il faudra bien l'identifier puis le copier.

Choisir le mode HTML pour insérer le document 

En mode HTML, il faudra copier le code ci-dessous et remplacer  l'identifiant du fichier par le votre. Voici le  code selon le type de fichier concerné

IMAGE

[integration directe via Blogger> icône  "Insérer une image"]

ou

<img src="https://drive.google.com/uc?id=IDENTIFIANT" />

Faire une image cliquable qui renvoie vers un site ou un message

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
ou

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="https://drive.google.com/uc id=IDENTIFIANT" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>

Exemple

 FICHIER AUDIO

mp3

[code intégration  uniquement via cette méthode !]

sans démarrage automatique

<audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>

avec démarrage automatique

<audio controls autoplay="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>

Exemple

FICHIER PDF

[code intégration  uniquement via cette méthode !]

<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="600" height="850"></iframe>

Exemple

FEUILLE DE CALCUL 

(tableur)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<iframe width="500" height="300" frameborder="1" src="https://docs.google.com/spreadsheet/pub?key=IDENTIFIANT&output=html&widget=true"></iframe>

Exemple

PRÉSENTATION

(Diapos de type Powerpoint)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

Code avec démarrage auto

<iframe src="https://docs.google.com/presentation/d/IDENTIFIANT/embed?start=true&loop=true&delayms=5000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

ou

Code avec démarrage non auto

<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="IDENTIFIANT/embed?start=false&amp;loop=false&amp;delayms=5000" webkitallowfullscreen="true" width="680"></iframe>

Exemple

DESSIN 

(type Google drawings)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<img src="https://docs.google.com/drawings/d/IDENTIFIANT/pub?w=480&amp;h=360">

Exemple

DOCUMENT TEXTE

(Google Docs) 

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<iframe src="https://docs.google.com/document/d/IDENTIFIANT/pub?embedded=true"></iframe>

(fichier Word)

[code intégration  uniquement via cette méthode !]

<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="600" height="845"></iframe>

Exemple 

 VIDÉOS  

[integration directe via Blogger> icone  "Insérer une  vidéo"]

ZONE DE TEXTE

(Google Docs) 

Le Système d'Echange Local

permet de réaliser ses projets,

de se faire aider dans sa vie quotidienne,

de trouver l'objet de ses désirs,

sans utiliser le moindre centime.

Basé sur la solidarité, l'entraide, l'échange,

SEL' AVENIR Dracénie

est votre point d’accès à une économie solidaire moderne.

 Rejoignez-nous 

Permanence tous les vendredis

de 10 heures à 12 heures

Maison de la solidarité

boulevard Bernard de Trans

DRAGUIGNAN

Vous pouvez vous pré-inscrire

en cliquant ci-dessus

sur "Rejoignez-nous"

ou en vous rendant à la

permanence

TABLE

<table class="ccm" style="background-color: white; border-collapse: collapse; border-spacing: 0px; color: #303030; font-size: 14px; line-height: 21px; width: 100%px;"><tbody>
<tr><th style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></th><th style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></th></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>

</tbody></table>

SITE

<iframe src ="url de la page" width="600" height="800">
  <p>Your browser does not support iframes.</p>
</iframe>

Impression

<span style="font-weight: bold; text-align: center;color:#3333ff;"><a href="javascript:window.print()">Imprimer cette page</a></span>

Imprimer cette page