Les outils en ligne pour animer son site
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
1

Pixlr.com/editor
Pixrl
Editor
:
traitement
des
images
en
ligne
et
gratuit
Comme
nous
n'avons
pas
tous
la
possibilité
d'avoir
un
logiciel
de
traitements
des
images,
Pixlr
propose
un
logiciel
en
ligne,
gratuit.
Vous
pourrez
facilement
redimensionner
vos
images,
les
recadrer,
éventuellement
changer
le
contraste
et
la
luminosité.
Vous
trouverez
aussi
Pixlr
O-­‐Ma8c
pour
ajouter
des
filtres
tout
fait
à
vos
images.
Voir
sur
le
blog,
notre
didac22el
:
h5p://blog.voyelle.me/webtools/pixlr-­‐editor-­‐le-­‐photoshop-­‐en-­‐ligne
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
2

Pixlr.com/editor
Redimensionner
une
image
Lorsque
vous
arrivez
sur
l’Editor,
un
menu
apparaît
qui
vous
permet
soit
de
créer
une
image,
soit
d’en
récupérer
une
sur
votre
ordinateur,
soit
de
travailler
sur
une
image
en
ligne…
Pour
l’exemple
,
nous
allons
chercher
une
image
sur
l’ordinateur.
Nous
chargeons
une
image
et
nous
allons
pouvoir
la
modifier.
Vous
trouverez
un
menu
en
haut
à
gauche
un
menu
qui
rappelle
celui
de
Photoshop.
Dans
le
menu
«
image
»
vous
trouverez
toutes
les
op8ons
liées
à
l’image,
dont
le
redimensionnement.
Vous
trouverez
aussi
la
possibilité
de
travailler
avec
des
calques,
de
rajouter
des
filtres
(flous,
pixellisa8on,
…).
Dans
les
«
réglages
»
vous
pourrez
modifier
la
luminosité,
le
contraste.
Nous
retrouvons
aussi
«
éditer
»
avec
la
possibilité
d’annuler
une
ac8on.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
3

Pixlr.com/editor
Redimensionner
une
image
Pour
redimensionner
une
image,
vous
cliquez
sur
le
menu
«
image
»
puis
sur
«
Taille
de
l’image
».
S’ouvre
alors
une
fenêtre
où
s’affichent
les
dimensions
de
votre
image.
Nous
voyons
dans
cet
exemple
que
l’image
fait
4000
pixels
de
large.
En
gardant
les
propor8ons
pour
ne
pas
déformer
l’image,
nous
allons
modifier
la
largeur.
Vous
remarquez
que
la
hauteur
s’adapte
à
la
largeur
automa8quement
lorsque
«
Conserver
les
propor8ons
»
est
coché.
Vous
validez
la
modifica8ons
en
cliquant
sur
«
OK
».
Votre
image
est
redimensionnée.
Pour
agrandir
l’affichage
de
votre
image
modifiée,
il
vous
suffit
de
cliquer
sur
le
menu
«
visualiser
»
et
de
sélec8onner
«
Afficher
tout
».
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
4

Pixlr.com/editor
Enregistrer
une
image
Vous
pouvez
réaliser
d’autres
modifica8ons.
Quand
vous
avez
terminé,
il
vous
suffit
de
cliquez
sur
la
croix
en
haut
à
droite
de
l’image
pour
la
fermer.
Une
fenêtre
s’ouvrira
pour
que
vous
nommiez
le
fichier
puis
pour
l’enregistrer
sur
votre
ordinateur.
Vous
avez
la
possibilité
d'enregistrer
en
JPG
(à
privilégier
pour
le
web),
PNG
(pour
le
web,
l'image
sera
peu
compressée
et
gère
la
transparence,
elle
peut
être
assez
lourde)
,
BMP
(à
éviter
pour
le
web,
sans
perte
de
qualité),
TIFF
(format
spécifique
à
l'édi8on)
ou
en
PXD
(format
spécifique
à
Pixlr
qui
vous
permet
de
garder
les
calques,
de
créer
des
templates
types...).
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
5

Les applications Google
Les
applica8ons
Google
sur
Drive
À
par8r
d'un
compte
GMAIL,
vous
avez
accès
à
un
certain
nombres
d'applica8ons
en
ligne
qui
tournent
sur
le
Drive,
le
service
de
Cloud
de
Google.
Le
Cloud
est
un
service
qui
vous
permet
de
synchroniser
des
contenus
entre
plusieurs
ordinateurs
et
un
espace
en
ligne.
Cela
vous
permet
d'accèder
à
des
contenus
partout
où
vous
aurez
accès
à
internet.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
6

Les applications Google
Les
applica8ons
Google
vous
permet
d'accéder
à
un
traitement
de
texte,
à
un
tableur,
un
ou8l
pour
créer
des
présenta8ons
(avec
des
slides
comme
sur
powerpoint),
à
des
ou8ls
pour
dessiner
et
à
un
ou8l
de
créa8on
de
formulaires
en
ligne
assez
puissant.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
7

Les applications Google
Installer
Drive
L'intérêt
de
Drive
(comme
aussi
DropBox,
iCloud,
SkyDrive
ou
Wuala)
est
de
pouvoir
accéder
partout
où
vous
avez
un
accès
web
et
à
un
ordinateur,
à
des
données
(fichiers
essen8ellement).
Pour
installer
Drive
sur
vos
ordinateurs
:
htp://goo.gl/eotp7
Le
plus
de
Drive
par
rapport
à
ses
concurrents
est
que
vous
bénéficier
non
seulement
du
mail
mais
des
applica8ons.
La
synchronisa2on
de
vos
fichiers
et
dossier
peut
se
faire
sur
la
totalité
de
vos
contenus
ou
sur
une
par8e
seulement.
Vous
avez
aussi
la
possibilité
de
partager
des
fichiers
ou
des
dossiers
à
d'autres
comptes
(gmail)
ou
de
les
rendre
public
via
une
URL
que
vous
pouvez
alors
diffuser.
Les
applica2ons
(traitement
de
textes,
tableur...)
ne
sont
pas
très
éloignées
des
suites
comme
Open
Office
ou
Microsow
Office.
Il
n'y
a
pas
toutes
les
op8ons
mais
ils
sont
facilement
partageables.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
8

IFTTT
Automa8ser
des
ac8ons
(veilles,
réseaux
sociaux...)
IFTTT
est
un
ou8l
assez
simple
d'u8lisa8on
qui
vous
permet
de
créer
des
ac8ons
automa8ques
entre
plusieurs
services.
Voir
notre
didac88el
en
ligne
:
htp://blog.voyelle.me/veille/xfruits-­‐et-­‐iwt-­‐automa8sa8on
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
9

IFTTT
Channels
–
connecter
IFTTT
à
vos
services
La
première
chose
à
faire
est
de
metre
en
rela8on
vos
services
avec
IFTTT.
Certains
services
sont
par
nature
déjà
en
place
comme
les
flux
RSS,
les
emails.
Vous
pouvez
ajouter
plusieurs
applica8ons
:
§ Delicious
et
Diigo
(archivage
de
liens)
§ Dropbox,
Google
Drive,
Skydrive
(Services
de
Cloud)
§ Facebook
(compte
et
page),
Twiter,
Instagram,
LinkedIn,
Foursquare,
Flickr,
Soundcloud,
Tumblr,
Vimeo,
Wordpress,
Blogger,
Youtube...
(Réseaux
sociaux
et
plus)
§ Gmail,
Google
Agenda,
Google
Reader,
Google
Talk
§ Evernote,
Instapaper
(Services
de
stockage
d'ar8cles
et
plus)
Certains
services
comme
le
SMS
ne
sont
pas
disponibles
en
France
car
liés
à
des
volontés
des
fournisseurs
d'abonnement
téléphoniques.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
10

IFTTT
Créer
une
tâche
Vous
cliquez
sur
Create
pour
lancer
la
créa8on
d'une
tâche
qui
va
donc
metre
en
route
un
processus
automa8que.
Vous
voyez
apparaître
une
simple
ligne
avec
la
première
ac8on
cachée
sur
le
lien
"this"
sur
lequel
vous
cliquer.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
11

IFTTT
Créer
une
tâche
Vous
choisissez
ensuite
dans
la
liste
le
canal
de
source
de
contenu.
Par
exemple,
je
choisis
le
canal
Feed
qui
va
me
permetre
de
récupérer
les
données
d'un
flux
RSS.
Puis
je
choisis
"New
feed
item"
pour
récupérer
les
prochains
contenus
diffusé.
Je
colle
l'url
du
Flux.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
12

IFTTT
Créer
une
tâche
Il
vous
reste
maintenant
à
iden8fier
l'applica8on
qui
doit
recevoir
l'informa8on
en
cliquant
sur
That.
Vous
choisissez
l'applica8on
dans
la
liste.
Par
exemple,
je
veux
que
chaque
nouveau
contenu
du
flux
RSS
aille
directement
sur
ma
page
Facebook
sous
forme
de
lien
et
non
de
statut.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
13

IFTTT
Créer
une
tâche
Il
ne
vous
reste
plus
qu'à
enregistrer
l'ac8on
et
à
la
décrire
pour
vous
souvenir
de
ce
qu'elle
fait.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
14

SlideShare
Héberger
vos
documents
et
en
faciliter
la
lecture
Slideshare,
au-­‐delà
de
son
aspect
réseau
social,
est
un
espace
d'hébergement
pour
documents
type
PowerPoint,
Word,
PDF
et
même
vidéo.
Le
double
avantage
de
cete
plateforme
est
que
vous
pourrez
à
la
fois
afficher
vos
documents
sur
votre
site
pour
que
l'internaute
puisse
les
lire
simplement
et
élargir
leur
diffusion
hors
de
l'espace
de
votre
site
web.
Pour
simplifier
la
démarche,
je
vous
conseille
de
passer
vos
document
au
format
PDF.
Les
personnes
qui
téléchargeront
vos
documents
n’auront
ainsi
accès
qu’au
PDF
et
non
au
powerpoint
ou
document
word,
ils
ne
pourront
pas
les
modifier
(à
moins
de
forcer
le
PDF),
juste
les
imprimer.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
15

SlideShare
Renseigner
le
document
pour
la
diffusion
Pendant
le
téléchargement
et
la
conversion,
vous
avez
un
peu
de
temps
pour
renseigner
les
champs
du
8tre,
des
tags
(mots
clés)
et
de
la
descrip8on.
Si
vous
n’avez
pas
eu
le
temps
de
tout
renseigner,
vous
avez
toujours
la
possibilité
de
les
modifier
par
la
suite.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
16

SlideShare
Afficher
les
documents
sur
un
site
Sur
la
page
de
votre
document,
vous
trouverez
en
haut
à
droite
du
bloc
le
bouton
«
Intégrer
».
Il
ouvrira
un
module
pour
copier
le
code
à
insérer
sur
votre
site.
En
cliquant
sur
«
Customize…
»,
vous
accéderez
à
quelques
op8ons
supplémentaires
pour
choisir
une
taille
du
module
plus
ou
moins
grande.
Pour
les
powerpoint
ou
PDF
provenant
de
slides,
vous
aurez
une
op8on
supplémentaire
pour
pouvoir
commencer
l’affichage
sur
une
page
précise.
Il
est
possible
de
le
faire
sur
les
autres
documents
en
rajoutant
dans
le
contenu
de
l’iframe,
sur
l’atribut
src,
?
startSlide=(numéro
de
la
page).
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
17

SlideShare
Intégrer
le
document
Le
code
que
vous
copiez
en
cliquant
sur
«
Copy
»
comprendra
ce
qui
suit
:
<iframe
src="htp://www.slideshare.net/slideshow/
embed_code/13750497"
width="479"
height="511"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no"
style="border:1px
solid
#CCC;border-­‐width:
1px
1px
0;margin-­‐botom:5px"
allowfullscreen>
</iframe>
Lorsque
vous
voulez
insérer
ce
code
slideshare
sur
un
site
basé
sur
un
CMS,
le
risque
est
que
vous
vous
retrouviez
avec
le
code
affiché
sur
le
site
au
lieu
de
voir
les
slides
!
Pour
éviter
ce
problème
il
faut
passer
en
visualisa8on
du
code
source.
C’est
un
peu
déstabilisant
quand
on
ne
connait
pas
le
HTML
mais
ça
vous
garan8t
un
bon
fonc8onnement.
Ensuite
il
vous
suffit
de
coller
le
code
là
où
vous
voulez
qu’il
apparaisse.
Voyelle
–
40
rue
du
Bignon,
forum
de
la
rocade,
bâ8ment
Oméga
à
Chantepie
-­‐
contact@voyelle.fr
18