Cours d'informatique de SEL'AVENIR: 2015

lundi 14 décembre 2015

Mémo 17 (atelier informatique du 9/12/2015) : Création de calendriers

Calendriers de l'année 2016

Calendrier 2016 Sel'Avenir

Word Open Office

Calendrier 2016 Bleu Blanc Rouge

(en souvenir des soutiens du monde)

lundi 7 décembre 2015

Mémo 16 (atelier informatique du 2/12/2015) : Création du Blog - Utilisation du code HTML

Astuces HTML

Pour ajouter des gadgets, faire des effets, personnaliser le style de votre blog, vous avez parfois besoin de passer en mode avancé, afin d'écrire ou de recopier du langage HTML Blogger pour votre Blog.

Créer un tableau dans un article ou un page

Créer un tableau dans un article sur Blogger Blogspot

Créer un tableau sur Blogger en mode HTML:

Dans votre article ou votre page, passez en mode HTML

Insérez le code suivant à l'endroit où vous souhaitez positionner le tableau

<table border="1">
<tr>
<th>Titre</th><th>Titre</th>
</tr>
<tr>
<td>Cellule</td><td>Cellule</td>
</tr>
<tr>
<td>Cellule</td><td>Cellule</td>
</tr>
</table>

Repassez en mode Rédiger, voici à quoi ressemble le tableau:

Titre	Titre
Cellule	Cellule
Cellule	Cellule

Mettre un texte défilant sur son blog

Il faut aller sur "Mise en page"

Ensuite "Élément de page "

Ajouter un élément: un HTML/JavaScript

Et Copier/Coller ce code :
<span style="text-decoration: underline;"> <div style="FONT-SIZE: 18px; LEFT: 50%; MARGIN-LEFT: -435px; WIDTH: 575px; COLOR: #000000; FONT-FAMILY: arial; POSITION: absolute; TOP: 20px; HEIGHT: 450px"><marquee width="100%" scrollamount="5"><b>TEXTE <b></b></b></marquee></div></span>

Note : la couleur du texte est noir mais pour la changer repéré #000000 et choisir votre couleur ici et évidemment taper votre texte à la place de "TEXTE "

TEXTE DEFILANT

lundi 30 novembre 2015

Mémo 15 (atelier informatique du 25/11/2015) : Création du Blog - Insertion de gadgets

Utilisation des gadgets

Accéder à la mise en page

Ajouter un gadget

choisir le gadget

Configurer et enregistrer le gadget

Listes des Gadgets utiles

	Bouton +1 - Pour permettre aux visiteurs de recommander le contenu dans la recherche Google et le partager sur Google+
	Membres Google+ - Pour mettre en avant votre audience totale sur Google+ (nombre de visiteurs et quelques photos) et offrir aux visiteurs la possibilité de vous suivre sur Google+.
	Badge Google+ - Pour obtenir plus de recommandations du blog dans les recherches Google et développer l'audience sur Google+
	Traduire - Pour traduire votre blog en plusieurs langues
	Suivre les mises à jour par e-mail - Pour permettre aux lecteurs de s'inscrire afin de suivre les mises à jour du blog par e-mail
	Articles les plus consultés - Affiche la liste des articles les plus consultés de votre blog
	Statistiques du blog - Affiche les statistiques de votre blog
	Pages - Afficher une liste des pages autonomes de votre blog
	AdSense - Pour gagner de l'argent (? ;-) en affichant des annonces sur votre blog.
	Membres - Pour afficher une liste des membres de votre blog
	Champ de recherche - Pour effectuer une recherche sur votre blog, sur votre blogroll et sur tout ce à quoi vous êtes connecté. .
	HTML/JavaScript - Pour ajouter une fonctionnalité tierce ou un autre code à votre blog.
	Texte - Pour ajouter quelques lignes à votre blog (une présentation rapide du blog, un message de bienvenue par exemple).
	Image - Pour insérer une image présente sur votre ordinateur ou le Web.
	Diaporama - Pour ajouter un diaporama de vos photos à votre blog.
	Barre de recherche de vidéos - Pour afficher des extraits provenant de YouTube et de Google Video que vos lecteurs pourront regarder sans quitter la page.
	Sondage - Pour effectuer une enquête auprès des visiteurs en ajoutant un sondage à votre blog.
	Liste des blogs - Pour montrer ceux que vous lisez avec un blogroll de leurs actualités.
	Liste des liens - Pour ajouter une liste de vos sites, blogs ou pages Web favoris.
	Liste - Pour ajoutez la liste de vos livres ou de vos films préférés, ou tout ce qu'il vous plaira.
	Flux - Pour ajouter le contenu d'un flux RSS ou Atom à votre blog.
	Newsreel (actualités) - Pour ajouter automatiquement les titres de Google Actualités à votre blog.
	Libellés - Pour afficher tous les libellés (les rubriques) des messages dans votre blog.
	Liens d’inscription - Pour autoriser vos lecteurs à s’inscrire à votre blog à l’aide de lecteurs de flux populaires.
	Logo - Pour choisir selon les différents logos Blogger à ajouter à votre page.
	Profil - Pour afficher des informations sur vous-même (infos saisies sur le Tableau de bord).
	Archives du blog - Pour afficher les liens vers des messages plus anciens.
	En-tête de la page - Pour afficher le titre et la description du blog.
	Attribution - Pour afficher les données d'attribution du blog.

lundi 23 novembre 2015

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"]

<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 !]

Exemple

FEUILLE DE CALCUL

(tableur)

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

Exemple

PRÉSENTATION

(Diapos de type Powerpoint)

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

Code avec démarrage auto

Code avec démarrage non auto

Exemple

DESSIN

(type Google drawings)

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

Exemple

DOCUMENT TEXTE

(Google Docs)

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

(fichier Word)

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

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

Impression

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

Imprimer cette page

Pages

lundi 14 décembre 2015

Mémo 17 (atelier informatique du 9/12/2015) : Création de calendriers

lundi 7 décembre 2015

Mémo 16 (atelier informatique du 2/12/2015) : Création du Blog - Utilisation du code HTML

Créer un tableau sur Blogger en mode HTML:

lundi 30 novembre 2015

Mémo 15 (atelier informatique du 25/11/2015) : Création du Blog - Insertion de gadgets

lundi 23 novembre 2015

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