Page | 0 Par JJ Pellé Aout 2013
Page | 1
Préambule
Créer un site avec Jimdo est d'une grande simplicité. Pas la peine de créer des lignes de codes, Il vous suffit d'écrire en clair et Jimdo se charge de la traduction.
Pas besoin de connaissances en informatique ou en création de site pour lancer votre page perso, professionnelle ou même votre site marchand.
De plus, Jimdo vous offre plusieurs options.
- La création d'un site gratuit, mais vous serez limité au niveau de la mémoire, du design, bien que ce soit déjà très bien. Par contre, il faudra accepter l'image publicitaire de Jimdo. Vous ne pourrez créer un nom de domaine personnalisé (le nom du site se terminera toujours par .jimdo.com). C'est ce que nous allons étudier dans ce document.
- La création d'un site professionnel à un prix très raisonnable (60 Euros par an), très intéressant pour les associations, les commerçants et autres professionnels.
- La création d'un site Jimdobusiness (180 euros par ans), plus adapté pour le e-commerce et les entreprises).
Texte de Wikipédia.
Jimdo est un système de gestion de contenu web permettant de créer un site web sans connaissance HTM.
Utilisable directement en ligne, il se caractérise par sa facilité et sa rapidité d'utilisation .
Ce service gratuit s'inscrit dans la lignée du Web 2.0 puisqu'il remplace totalement un logiciel et que l'interface utilisateur, qui permet de créer les pages de son site, utilise la technologie WYSIWYG. Les sites sont
automatiquement mis en ligne et hébergés sur les serveurs de l'entreprise dès leur création et les adresses des sites sont au départ de type nom-d-utilisateur.jimdo.com (cela fonctionne comme un sous-domaine du site Jimdo.com), mais il est également possible d'installer un nom de domaine personnel sur un site Jimdo.
La création d'un site s'organise autour de l'ajout ou du déplacement de différents modules (textes, images, films, widgets…) (technologie "Click & Change"), et du choix d'un des modèles d’habillage proposés, ou bien de la mise en place de sa mise en page personnelle.
Jimdo est disponible en 8 langues: français, allemand, anglais, espagnol, italien, russe, chinois et japonais.
Exemple de site créé par un élève du club http://www.senioriales-indignezvous.fr/
Page | 2
Table des matières
Préambule ... 1
I- Accès au site de Jimdo ... 5
II-Saisie des informations vous concernant ... 6
III- Initialiser votre site ... 7
IV - Créer, modifier, supprimer des pages (onglets) ... 11
A- Modifier le nom d'une page ... 12
B - Ajouter une nouvelle page : par exemple "Mes photos" ... 12
C - Déplacer un onglet ... 13
D - Supprimer un onglet ... 13
E - Ajouter un sous onglet ou une sous page : ... 14
V- Donner un titre et mettre une image d'accueil à votre site. ... 16
A- Donner un titre ... 16
B - Modifier le Header ... 17
C - Mettre une image personnelle dans le header : ... 17
VI - Paramétrer les styles d'écritures (titres, textes...). ... 19
A - Paramétrage des titres ... 20
B- paramétrage des textes ... 20
C - Paramétrage des liens... 21
D - paramétrage des séparateurs. ... 21
E - Styles par défaut. ... 21
F- Enregistrement. ... 22
VII- Étude des différentes options du menu. ... 23
A- gestion des éléments: ... 23
1 - Les flèches : ... 23
2 - La poubelle : ... 23
3 - Le copier/coller : ... 24
4 - L'ajout d'élément :... 24
B- Les différentes options du menu ... 25
1 - modifier un élément : ... 25
2 - Créer un titre : ... 25
2 - Insérer une image : ... 25
3- Créer un texte : ... 27
4 - Créer du texte avec une image. ... 28
5 - Créer un espacement. ... 31
5 - Créer un tableau. ... 32
5-1- Modifier un tableau : ... 32
Page | 3
5-2- Modifier les caractéristiques des lignes : ... 32
5-3- Modifier les caractéristiques des cellules : ... 33
5-4 -Gérer les lignes : ... 33
5-5- Gérer les colonnes : ... 33
5-6- Gérer les cellules : ... 33
5 -7- Modification des caractères. ... 34
6 - Créer une galerie d'images. ... 34
6-1-l'outil format : ... 34
6-2-L'outil afficher : ... 34
6-3-L'outil Proportion : ... 35
6-4- L'outil taille : ... 35
6-5- L'outil Chargement : ... 35
6- 6- L'outil diaporama : ... 35
7 - L'option téléchargement : ... 36
8 - L'option formulaire : ... 37
9- L'option séparation : ... 37
10 - L'option livre d'or : ... 38
11 - L'option Vidéo : ... 38
12 - L'option Flickr : ... 39
13 - L'option Google Maps : ... 40
14 - L'option Widget HTML ... 41
14-1-Qu'est ce qu'un Widget ? ... 41
14-2 -Ou les trouver ? ... 41
14-3 Exemple de site offrant des widgets... 41
14-5-Il faut être prudent : ... 43
14-6 les Widgets indispensables pour don site : ... 43
15 - L'option Article : ... 44
16 - l'option catalogue : ... 45
Format ... 45
Taille de l`image ... 45
Proportions ... 45
Style ... 45
Option d'affichage ... 45
Paramètres de sélection par défaut ... 45
17 - Les options Twitter, facebook et Google+ ... 46
Twitter ... 46
Facebook ... 46
Google+ ... 46
18 - L'option Flash ... 46
Page | 4 19- L'astuce de JJ pour sonoriser vos pages. ... 48 20- Codes HTML pour vos widgets. ... 56
Page | 5
I- Accès au site de Jimdo
Ouvrir votre navigateur puis tapez "Jimdo " sur votre moteur de recherche.
Page | 6
II-Saisie des informations vous concernant
Ensuite, accéder au site puis suivre les instructions.
saisir l'adresse de votre site, pour notre exemple : formation-site. Jimdo va rajouter ".jimdo.com".
l'adresse du site sera donc : http://formation-site.jimdo.com
Saisir ensuite votre adresse mail, un mot de passe (attention de bien pouvoir le retenir).
Cocher la case "Oui , j'ai lu les conditions d'utilisation...." puis cliquer sur "Créer mon site"
Vous aurez à saisir un texte afin que Jimdo vérifie qu'il ne va pas recevoir un spam.
Votre site va se créer, vous allez recevoir un mail de Jimdo.
Page | 7
III- Initialiser votre site
Conseil important : relevez bien avec précision le nom de votre site ainsi que le mot de passe, afin de pouvoir vous reconnecter facilement si vous restez un certain temps sans vous en occuper au début.
En vous connectant sur votre site, vous allez pouvoir le compléter.
Première chose, lui donner un titre, mais avant tout vous connecter.
Taper l'adresse de votre site dans l'adresse internet du navigateur puis sur connexion.
Page | 8 Ensuite, rentrez votre mot de passe
La première fois, on vous demande de confirmer votre adresse E-mail. les fois suivantes, vous n'aurez juste qu'à rentrer votre mot de passe.
Page | 9 Une alerte de sécurité peut apparaitre, cliquez sur "Envoyer quand même"
Choisir un DESING
Différents types de DESING vous sont proposés. Choisissez celui qui vous convient le mieux.
Si vous avez choisi l'option jimdo pro, la liste de DESING sera plus importante.
Cliquer ici
Page | 10 La liste s'affiche, choisissez en cliquant dessus.
Cliquer sur "OUI" pour valider votre choix.
Page | 11
IV - Créer, modifier, supprimer des pages (onglets)
Positionner votre souris au niveau des onglets existant . l'encart "Modifier navigation apparait".
Attention, suivant le choix de votre DESIGN, les onglets peuvent être présentés différemment.
A droite de haut en bas, à gauche de haut en bas, sous le titre...
Cliquer sur l'encart, le menu suivant apparait.
Page | 12
A- Modifier le nom d'une page
Par exemple, changer "A propos" en "Mes documents".
Sélectionner le nom de la page puis le remplacer.
B - Ajouter une nouvelle page : par exemple "Mes photos"
Cliquer sur "Ajouter une nouvelle page ", puis saisir le titre dans le nouvel onglet créé
Page | 13
C - Déplacer un onglet
Cliquer sur la flèche à droite de l'onglet (ici en bleu)pour le faire passer au dessus de l'onglet précédent.
De même pour le faire passer au dessous de l'onglet suivant, cliquer sur la flèche vers le bas correspondante
D - Supprimer un onglet
Pour supprimer un onglet, cliquer sur la poubelle face à celui ci à droite.
Le menu suivant apparait confirmer en cliquant sur "oui Supprimer"
Page | 14
E - Ajouter un sous onglet ou une sous page :
Créer un nouvel onglet (nouvelle page) en cliquant sur le "+ "à droite de l'onglet de qui il dépendra (par exemple le + à droite de mes documents). La page qui va se créer se situera sous la page "mes documents".
Puis en cliquant sur la flèche vers droite, en faire un sous onglet de mes documents, nommer la nouvelle page par exemple en "Mes recettes de cuisines". Cliquer sur la petite flèche direction droite face à la nouvelle page pour indiquer que c'est un sous onglet (ou page secondaire)
.
Cliquer ensuite sur enregistrer, puis fermer.
l'onglet se décale vers la droite et devient sous onglet
Page | 15 En cliquant sur Documents, l'onglet recettes de cuisines apparait. Vous pouvez rajoutez autant de sous onglet que vous le désirez, la limite est la place et l'esthétique.
Lorsqu'on clique sur la page "Mes documents, la page Mes recettes de cuisine apparait .
Actuellement, la page mes documents est active. Il faut cliquer sur l'onglet "Mes recettes de cuisine"
pour accéder à cette page.
Page | 16
V- Donner un titre et mettre une image d'accueil à votre site.
A- Donner un titre
Cliquez sur modifier le header
Cliquer sur "Titre".
On peut Modifier :
- la police, le style (Normal, Gras, Italique et Gras Italique), la taille de la police , - La position horizontale et verticale en glissant les boutons sur les curseurs.
- La couleur
Le logo peut être modifié à condition d'avoir l'option Jimdo PRO.
Page | 17
B - Modifier le Header
On peut modifier la hauteur du header sur la page, zoomer sur l'image, déplacer l'image en vertical et dans certaines conditions horizontal.
Cliquer ensuite sur Enregistrer les modifications.
C - Mettre une image personnelle dans le header :
Cliquer sur image personnelle puis sur Choisissez un fichier parmi vos images
Page | 18 Il est intéressant de choisir une photo panoramique, afin de ne pas être obligé de faire un header trop important en hauteur. Voici un exemple.
On peut modifier la taille de l'image en zoomant dessus, on peut la déplacer en horizontal et en vertical, modifier la taille du header sur la page.
Ne pas oublier de cliquer sur "Enregistrer les modifications" puis sur "fermer".
Quitter les modifications :
Cliquer sur déconnexion en bas de la page si vous avez terminé la saisie pour aujourd'hui ou cliquez sur l'option "Afficher". Qui vous déconnectera provisoirement afin de tester vos modifications.
Pour vous remettre en mode modification, cliquer sur l'option modifier qui a remplacé l'option afficher
Page | 19
VI - Paramétrer les styles d'écritures (titres, textes...).
Rappels pour nous reconnecter : saisissons l'adresse de notre site dans la zone d'adresse URL de la page internet en prenant garde de saisir la bonne syntaxe :
Nota : vous n'êtes pas obligé de taper le http://, il se mettra par défaut.
Une fois le site chargé, cliquez sur connexion
Puis mettez votre mot de passe.
Cliquer sur connexion
Page | 20 Une fois connecté, nous allons paramétrer les différents formats d'écriture (titres, textes...).
A - Paramétrage des titres
Pour les 3 options de titres proposées par Jimdo vous pouvez modifier : - le type de police d'écriture,
- la taille de la police
- le style : gras, italique, aligné à gauche, centré ou aligné à droite.
- la couleur du texte.
Nota : à chaque modification, vous pouvez visualiser l'effet à gauche du menu
Dans notre exemple, j'ai créé :
Les titres 1 en Times new roman 40 points gras et centré, couleur bleue.
Les titres 2 en helvetica 30 points, gras, italique, aligné à droite centré et couleur noir.
Les titres 3 en verdana, 20 points, gras, aligné à droite et couleur marron.
B- paramétrage des textes
De la même manière nous allons cliquer sur texte, puis choisir le style, la police et la couleurde la même manière
Cliquer sur le logo Style.
Page | 21
C - Paramétrage des liens
Pour les liens, on peut changer uniquement la couleur.
D - paramétrage des séparateurs.
Cliquer sur séparation
Vous pouvez séparer les différents titres, textes etc.., avec un séparateur, qui peut se présenter en trait plein pointillés ou tirets. Vous pouvez modifier la forme du trait et la couleur de celui ci.
E - Styles par défaut.
Jimdo vous propose 4 styles par défaut avec des pré réglages pour chaque type d'éléments.
Cliquer sur propositions et choisir le style parmi les 4. vous pouvez visualiser les effets dans la fenêtre à gauche du menu
Page | 22
F- Enregistrement.
Après ces modifications, ne pas oublier de cliquer sur Enregistrer sans quoi elles seront perdues et à refaire.
Attention : une fenêtre aperçu s'ouvre au dessus du header, surtout répondre "oui " à la question
"Souhaitez vous adopter cette nouvelle police d'écriture", autrement la modification ne sera pas prise en compte. Ceci après chaque modification de style.
Rappel : le header est l'emplacement de l'image et du titre du site
Page | 23
VII- Étude des différentes options du menu.
A- gestion des éléments:
1 - Les flèches :
Permettent de passer l'élément au dessus ou au dessous des autres.
Nota : Les deux flèches apparaissent à la condition qu'il y ai un élément au dessus et au dessous de celui sur lequel on est positionné. Dans notre exemple, on ne voit que la flèche vers le haut car il n'y a pas d'éléments sous notre texte.
Cette flèche permet de passer éventuellement le texte au dessus de Bienvenue.
2 - La poubelle :
Permet de supprimer l'élément. la fenêtre suivant apparait et demande confirmation. Un élément supprimé ne peut plus être récupéré
En mode connexion, positionner la souris sur l'élément à supprimer : ici le texte
"Des questions ?Consulter nos...",le curseur se transforme en main pour indiquer qu'il est actif et les éléments suivants apparaissent sur l'écran.
Page | 24 3 - Le copier/coller :
Copie l'élément et le recolle au dessous. On peut ensuite le déplacer sur la page par rapport aux autres éléments avec les flèches
4 - L'ajout d'élément :
Lorsqu'on clique sur le signe plus, un nouvel élément peut être rajouté sous celui ci. Il pourra ensuite être déplacé sur la page avec les flèches.
Une autre méthode pour rajouter un élément : cliquer sur "Ajouter nouvel élément" sous la page
Le menu suivant apparait
Page | 25
B- Les différentes options du menu
1 - modifier un élément :
il suffit de cliquer sur l'élément en question à condition d'être en mode "Connexion"
2 - Créer un titre :
Cliquer sur l'option titre. la fenêtre suivante s'ouvre, saisir le titre puis choisir le style (titre 1, 2 ou 3) en cliquant sur la case correspondante.
Bienvenue étant le titre 1, je choisis titre 2
ne pas oublier de cliquer sur "Enregistrer" pour prendre en compte votre modification.
Le titre va apparaitre soit dans le style par défaut de Jimdo, soit dans le style que vous aurez paramétré (chapitre VI page 19)
2 - Insérer une image :
Cliquer sur l'option image du menu puis sur parcourir.
Page | 26 Rechercher l'image dans le dossier spécifié puis cliquer sur "Ouvrir"
Nota : Jimdo prend en compte les GIF animés
Il est possible :
- De modifier la taille de l'image en cliquant sur + ou - au coup par coup. la double flèche permet de régénérer la taille d'origine.
- De positionner l'image en l'alignant à gauche, à droite ou centrée . - De la retourner par coups de 90°en sens horaire ou trigonométrique
Cliquer sur enregistrer pour valider votre opération.
Page | 27 Résultat :
3- Créer un texte :
Dans l'exemple, je positionne ma souris sur le titre "Bienvenue" puis sur le + qui apparait sur le coté gauche.
le menu apparait et je clique sur l'option "Texte" . Une zone de texte apparait sur la page.
Avant de saisir le texte, régler les styles . Vous avez la possibilité de le mettre en gras, italique, de changer la couleur, son alignement. autrement, vous avez la possibilité de les changer après l'écriture en sélectionnant le texte.
Ne pas oublier d'enregistrer votre travail
Page | 28 4 - Créer du texte avec une image.
Sur le menu, cliquer sur l'option "Texte avec image"
Rappelez vous, au début j'ai créé un sous onglet "Mes recettes de cuisines" sous l'onglet "mes documents"
Je vais donc remonter en haut de la page ou se trouvent les onglets (accès aux différentes pages du site), puis je clique sur "Mes documents" ce qui affiche l'onglet "mes recettes de cuisine. Je clique sur celui ci pour accéder à la page concernée. Je vais y placer une recette de cuisine.
Le menu apparait, cliquer sur l'option "Texte avec image".
Cliquer ensuite sur "Ajouter nouvel élément
Page | 29 Sur l'écran qui apparait, cliquer sur "Modifier image", puis cliquez sur parcourir et recherchez l'image que vous aurez préalablement rangée dans un dossier.
Vous pouvez l'agrandir, la positionner à droite (le texte se placera à gauche) ou à gauche (le texte se positionnera à droite).Vous pouvez aussi lui faire faire une rotation à droite ou à gauche.
Vous pouvez aussi rajouter un sous titre qui se placera sous la photo.
Un fois l'image installée, cliquer sur "Modifier texte " puis saisir le texte puis cliquer sur enregistrer.
ce module se gère comme le module texte(chapitre 3 page 27).
Ne pas oublier de cliquer sur "Enregistrer"
Page | 30 C'est pas mal, mais il manque un titre. Là !vous devez savoir faire
Au cas où, un petit rappel : cliquer sur cet élément, puis sur le + qui se place à gauche, ensuite sur l'option titre du menu qui apparait puis sur la petite flèche vers le haut pour remonter le titre au dessus, car il s'est positionné sous la recette. Saisir le menu, choisir parmi les 3 styles possibles, puis enregistrer.
Ici j'ai choisi le menu 3qui est le plus petit.
Résultat
Page | 31 5 - Créer des colonnes.
Jimdo vous offre la possibilité de créer des colonnes.
Après avoir cliqué sur le + ou l'option nouvel élément, cliquer sur l'option colonne du menu.
Sous l'élément précédent, se crée cette fenêtre.
A partir de là, vous pouvez ajouter des éléments sur deux colonnes en cliquant sur les "+" de cette fenêtre.
5 - Créer un espacement.
On peut créer des espacement entre chaque élément.
L'espacement est réglable en hauteur
Menus apparaissant sur chaque colonne
Page | 32 5 - Créer un tableau.
Cliquer sur l'option tableau du menu ajout d'élément. Ce tableau apparait par défaut.
Il suffit d sélectionner la case pour changer le contenu.
5-1- Modifier un tableau :
Changer les données dans la boite de dialogue qui apparait.
5-2- Modifier les caractéristiques des lignes : Cliquer sur
cet icone
Page | 33 5-3- Modifier les caractéristiques des cellules :
5-4 -Gérer les lignes :
Ces deux options vous permettent d'insérer une ligne avant ou une ligne après.
cette option permet d'effacer une ligne
5-5- Gérer les colonnes :
Ces outils permettent dans l'ordre : - D'insérer une colonne avant - d'insérer une colonne après - d'effacer ne colonne
5-6- Gérer les cellules :
Ces outils permettent dans l'ordre : - Scinder les cellules fusionnées.
- Fusionner les cellules.
Page | 34 5 -7- Modification des caractères.
Cette barre d'outils permet de modifier les caractères du tableau (gras, italique, alignement, couleur...).
La police et la taille sont identiques aux caractères de l'option texte.
6 - Créer une galerie d'images.
Nous pouvons créer une galerie d'images avec diaporama en cliquant sur l'option "Galerie d'images " du menu. ne pas oublier d'enregistrer le travail à la fin.
Cliquer sur parcourir. Se situer sur le dossier contenant les images à insérer, les ouvrir puis cliquer sur chargement.
6-1-l'outil format : Il permet de modifier le format de présentation.
6-2-L'outil afficher : Cet outil permet d'afficher chaque image sous cet élément et de les modifier Cliquer sur la croix pour supprimer les images, on peut orienter les images à droite, à gauche, leur donner un titre, leur affecter un lien.
Page | 35 6-3-L'outil Proportion : cet outil permet de régler la proportions (largeur/hauteur) des images.
6-4- L'outil taille : il permet de régler la taille des images.
6-5- L'outil Chargement : cet outil permet de revenir au mode chargement pour rajouter des images 6- 6- L'outil diaporama : il permet d'afficher les photos en grand format et le diaporama.
on peut régler le temps d'apparition de l'image.
Page | 36 7 - L'option téléchargement :
Elle permet de mettre un document en téléchargement (power point, word, pdf, son, image...) sur le site.
la taille limite d'un fichier en téléchargement est de Mo actuellement. (A surveiller dans le temps)
Cliquer sur parcourir, sélectionner le fichier, puis cliquer sur ouvrir de la fenêtre de recherche.
patienter pendant que le fichier se charge.
Une fois le document téléchargé, on peut lui rajouter un titre et une description.
Ne pas oublier d'enregistrer le travail.
le document apparait sous cette forme sur le site :
le visiteur du site cliquera sur télécharger pour récupérer le document.
Page | 37 8 - L'option formulaire :
On peut insérer un formulaire pour permettre à un visiteur de s'exprimer.
Vous devez saisir l'adresse mail sur laquelle vous désirez recevoir le message.
Cliquer ensuite sur enregistrer
le visiteur peut mettre son nom, son adresse mail et saisir un message qui arrivera sur l'adresse que vous aurez saisi.
9- L'option séparation :
Cette option permet de séparer les différents éléments sur la page. On peut paramétrer plusieurs types de trait dans le paramétrage des styles.
Page | 38 10 - L'option livre d'or :
Cette option permet d'ajouter un livre d'or à votre site et recueillir des commentaires des visiteurs.
Une boite de dialogue s'ouvre sur laquelle vous choisissez les options de votre livre d'or en les cochant.
Comme d'habitude, ne pas oublier d'enregistrer à la fin de votre saisie.
11 - L'option Vidéo :
Cette option vous permet de créer un lien vers une vidéo provenant d'une plateforme telle que Youtube.
Vous pouvez insérer des vidéos venant de douze plateformes :
YouTube, MyVideo, Vimeo, DailyMotion, Blip, Sevenload, Metacafe, Clipfish, Veoh, RuTube, Youku, Tudou
Copier le lien et l'insérer dans le champ de l'option.
Vous pouvez choisir un affichage en 4/3 ou en 16/9 et régler la taille de votre image sur la page.
Page | 39 Résultat : une image de la vidéo s'affiche sur la page. Il suffit de cliquer sur la flèche pour la lancer.
Choix en 4/3
Choix en 16/9
12 - L'option Flickr :
Vous avez la possibilité d´insérer Flickr sur votre site Jimdo ! Flickr est une communauté
internationale qui vous permet de rassembler, organiser et archiver des photos. Vous pouvez créer différents albums photos et les partager avec d´autres utilisateurs. Avec notre élément Flickr, vous pouvez afficher certaines de vos photos provenant de votre compte Flickr sur votre site Jimdo.
Mettre en plein écran
Page | 40 13 - L'option Google Maps :
Avec Google Maps, vous pouvez entrer un lieu précis et accompagner votre adresse d'une carte.
Google Maps est gratuit . Vous pouvez entrer l'adresse d'un lieu, insérer un repère.
Comme d'habitude, ne pas oublier d'enregistrer.
En tant que visiteur, je fais faire un calcul d'itinéraire entre Saint Romain et Corme.
En positionnant le petit bonhomme jaune sur la carte, vous naviguez en image
Page | 41 14 - L'option Widget HTML
Cette option est un peu plus difficile pour un débutant.
14-1-Qu'est ce qu'un Widget ?
C'est un petit objet comme un calendrier, une horloge, un compteur de visites, un indicateur de marées...
14-2 -Ou les trouver ?
Dans la rubrique outils de jimdo ou sur des sites spécifiques.
14-3 Exemple de site offrant des widgets
Prenons par exemple, l'annuaire des marées sur le site marée info
Ensuite, positionner la souris sur le menu "Marées" puis cliquer sur "Horloge des marées"
Page | 42 Cette fenêtre apparait.
Après avoir copié le code HTML qui vous est proposé, le coller dans le champ Widget de l'élément, puis cliquer sur enregistrer.
Choisir le port concerné
Copier les codes HTML dans ce champ
Page | 43 Voici le résultat
Nota : Si vous créez votre Widget dans l'encart publicitaire, il apparaitra sur toutes les pages.
Exemple :
14-5-Il faut être prudent :
Il faut faire attention de ne pas télécharger un Widget contaminé par un espion, qui va faire apparaitre des POPUP sur vos pages.
Je sais de quoi je parle, un widget d'horloge faisait apparaitre une pub sur un site coquin en arrière plan des pages de mon site.
14-6 les Widgets indispensables pour don site :
Les widgets incontournables sont : les horloges, la météo, les compteurs de visite, les calendriers.
Une liste de widgets à télécharger est mise à votre disposition en fin de document
Page | 44 15 - L'option Article :
http://aide.jimdo.com/e-boutique/article-de-l-e-boutique/prix/
L'option article permet de mettre un article en vente ou en location.
Saisir l'image de l'article, puis son prix, le stock disponible et le délai de livraison
En cliquant sur le bouton prix, vous accédez à la saisie du prix, du stok et du délai de livraison
Enregistrer vos données. Voici ce que donne l'élément vu par un visiteur
pour le délai, cliquer sur une des 3 images. Sont proposés : 1 à 3 jours, 3 à 5 jours et supérieur à 5 jours.
Page | 45 16 - l'option catalogue :
Si vous souhaitez vendre plusieurs articles différents sur votre e-boutique, nous vous conseillons de les présenter clairement à vos clients grâce au catalogue.
Pour cela, vous devez ajouter un nouvel élément "Catalogue" sur la page souhaitée. Si quelqu'un s'intéresse alors à un article du catalogue, il lui suffit de cliquer sur l'article : il sera alors automatiquement redirigé vers la page détaillée de l'article en question !
Format
Choisissez ici le mode d`affichage des diapositives du catalogue.
Taille de l`image
S, M, L ou XL, choisissez la taille des images dans le catalogue Proportions
Ici vous pouvez optimiser l'affichage des photos de vos articles selon leur format (paysage ou portrait).
Style
Sélectionnez ici le style du cadre de vos images. 6 styles différents sont disponibles Option d'affichage
Choisissez de masquer le nom du produit ou le prix annoncé du produit. Le visiteur pourra alors voir ces détails une fois après avoir cliqué sur l'objet en question.
Paramètres de sélection par défaut
Définissez l'ordre d'affichage de vos articles. Les paramètres suivants sont disponibles : nom de A-Z
nom de Z-A nouveau
prix : du moins cher au plus cher prix : du plus cher au moins cher article favori
17 - Les options Twitter, facebook et Google+
Vous pouvez ici relier votre compte Twitter à votre site Jimdo. Vos nouveaux articles de blog pourr être publiés directement sur votre profil Twitter !
Comment relier mon site Jimdo à Twitter
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/facebook/
Le module social Facebook de Jimdo va vous permettre de proposer une interaction à vos visiteurs sur votre site et créer le buzz sur la célèbre plateforme sociale !
Google+
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/google Google+ est un réseau social au même titre que
Google a la possibilité de se créer un profil sur Google+ et de se mettre en relation avec d'autres personnes inscrites sur ce réseau.
Le "Bouton+1" est l'équivalent du "J'aime" de Facebook.
résultats du moteur de recherche de Google (uniquement pour les personnes connectées à ce moment à leur compte Google). Vous pouvez facilement ins
18 - L'option Flash
Avec l'élément Flash, vous pouvez facilement insérer des films flash (.swf) sur votre site.
Grâce à format factory, vous pouvez convertir des vidéo en format swf et les installer sur la vidéo démarre automatiquement dès l'ouverture de la page.
Donc contrainte : ne mettre qu'une seule vidéo sur une page non sonorisée si la vidéo est elle même sonorisée.
Attention : l'option Flash n'est pas activée et n'apparait pas dans l pour l'activer, cliquer sur "Eléments suivants" sous le menu
Les options Twitter, facebook et Google+
Vous pouvez ici relier votre compte Twitter à votre site Jimdo. Vos nouveaux articles de blog pourr être publiés directement sur votre profil Twitter !
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/facebook/
de Jimdo va vous permettre de proposer une interaction à vos visiteurs sur votre site et créer le buzz sur la célèbre plateforme sociale !
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/google-ou-google-plus
au même titre que Twitter ouFacebook. Toute personne possédant un compte Google a la possibilité de se créer un profil sur Google+ et de se mettre en relation avec d'autres personnes
Le "Bouton+1" est l'équivalent du "J'aime" de Facebook. Ce bouton apparaît également dans les résultats du moteur de recherche de Google (uniquement pour les personnes connectées à ce moment à leur compte Google). Vous pouvez facilement insérer ce bouton sur les pages de votre site Jimdo.
Flash, vous pouvez facilement insérer des films flash (.swf) sur votre site.
Grâce à format factory, vous pouvez convertir des vidéo en format swf et les installer sur la vidéo démarre automatiquement dès l'ouverture de la page.
Donc contrainte : ne mettre qu'une seule vidéo sur une page non sonorisée si la vidéo est elle même
l'option Flash n'est pas activée et n'apparait pas dans le menu "Ajouter nouvel élément".
pour l'activer, cliquer sur "Eléments suivants" sous le menu
Page | 46 Vous pouvez ici relier votre compte Twitter à votre site Jimdo. Vos nouveaux articles de blog pourront alors
de Jimdo va vous permettre de proposer une interaction à vos visiteurs sur votre
. Toute personne possédant un compte Google a la possibilité de se créer un profil sur Google+ et de se mettre en relation avec d'autres personnes
Ce bouton apparaît également dans les résultats du moteur de recherche de Google (uniquement pour les personnes connectées à ce moment à leur
érer ce bouton sur les pages de votre site Jimdo.
Flash, vous pouvez facilement insérer des films flash (.swf) sur votre site.
Grâce à format factory, vous pouvez convertir des vidéo en format swf et les installer sur votre page Donc contrainte : ne mettre qu'une seule vidéo sur une page non sonorisée si la vidéo est elle même
e menu "Ajouter nouvel élément".
Page | 47 Une fenêtre paramètred de vos modules s'ouvre, cocher la case Flash. L'option flash va maintenant
apparaitre dans le menu éléments.
Lorsque vous cliquez sur l'option flash, cette fenêtre s'ouvre.
Cliquer sur parcourir puis recherchez votre fichier swf. Sélectionnez le puis cliquez sur éouvrir".
Une fois chargé sur votre page (cela demande un peu de temps suivant sa taille), cliquer sur enregistrer.
Attention : éviter de dépasser 10MO
Vous avez la possibilité de le positionner à gauche au centre ou à droite de la page, et paramétrer sa largeur et sa hauteur.
Page | 48
19- L'astuce de JJ pour sonoriser vos pages.
Attention : ne pas sonoriser une page susceptible de contenir un lien vidéo ou un autre élément sonore; les deux sons se supperposeraient
l'astuce est la suivante :
Astuce de JJ Pellé.
Les outils nécessaires :
Movie Maker ou Windows movie maker (fait partie du pack Windows)
Format Factory (convertisseur gratuit à télécharger depuis comment ça marche ou clubic) .
Eventuellement Audacity pour faire des arrangements de sons, mais pas obligatoire.
I - Choisir ou créer son morceau musical MP3.
II- Ouvrir le studio vidéo windows movie maker ou Windows live movie maker suivant la version Windows (ou un autre).
III - Ajouter une image
Page | 49
IV - Charger le morceau MP3.
Cliquer sur l'onglet accueil de Movie Maker (windows 7 )puis option "Ajouter de la musique"
V- Régler la durée de l'image en fonction de la durée du son.
Cliquer sur l'onglet "Outils Audio", repérer la longueur de la musique
Page | 50
Cliquer sur l'onglet "outil Audio et régler la durée de diffusion de l'image.
VI- Enregistrer la vidéo
Dans l'onglet Accueil, cliquer sur l'icone "Enregistrer film" et choisir l'option "Pour envoi par courrier électronique" car nous nous fichons de la qualité vidéo (il faut qu'elle soit la moins lourde possible) seule la qualité audio nous intéresse.
Nous retrouvons notre vidéo dans le dossier "Mes vidéos".
La vidéo de l'exemple fait 889 Ko, mais le son n'est pas long. Pour sonoriser nos pages de site nous pouvons avoir besoin de plusieurs minutes de musique.
VII- Convertir la vidéo en format Flash.
Ouvrir Format Factory et choisir l'option tout type vers SWF
Page | 51
Cliquer sur "Ajouter un fichier", rechercher puis charger la vidéo concernée, puis cliquer sur OK.
Cliquer sur "Démarrer"
Attention de bien repérer le dossier destination, éventuellement le modifier
Page | 52
Le fichier se trouve dans son dossier, sur mon ordinateur, j'ai choisi le bureau.
VIII - Ouvrir le site et se connecter.
Aller dans les paramètres et modules supplémentaires pour vous assurer que le module
"Flash "est activé . S'il ne l'est pas cocher la case "On" du module flash (chapitre 18 page
46). En principe, il n'est pas activé par défaut.
Page | 53
IX- Placer le son sur la page
Se positionner sur la page désirée, puis insérer le fichier swf.
Pour cela : se positionner sur le dernier élément de la page pour faire apparaitre les icones de
modification puis cliquer sur le +, "Ajouter nouvel élément"
Page | 54
Choisir l'option "flash"
Je règle la taille de l'image de la vidéo, je la centre sur la page , je clique sur "Choisir un fichier " pour sélectionner la vidéo, celui ci se charge. Une fois chargé, cliquer sur
"enregistrer".
Je crée ensuite un titre au dessus de l'image afin de bien repérer le fichier Flash.
Page | 55
Cela peut sembler rébarbatif, mais une fois habitué, cela va très vite. je me suis même préparé une série de fichiers SWF par avance, à vous de jouer
Jean Jacques Pellé
Page | 56
20- Codes HTML pour vos widgets.
Compteur de visite :
Code HTML
<a href="http://www.compteurdevisite.com" target="_Blank">stat</a><br />
<script
src="http://counter1.compteurdevisite.com/private/counter.js?c=b36f84bef213ad1db4789f1e8e2a7dd6"
type="text/javascript">
</script>
Pendules :
site : http://www.mytictac.com/fr/index.php Code HTML :
<script src="http://clock1.mytictac.com/private/mytictac.js?c=c46c27e4a18cdf271992d609359ff6a5"
type="text/javascript">
</script><noscript><a href="http://www.mytictac.com/fr/index.php">Horloges gratuites</a></noscript>
Météo
Site :
http://www.tameteo.com/meteo_Saujon-Europe-France-Charente+Maritime--1-25591.html Code HTML :<div id="cont_0015be003c320dde2c3151f8015387e5">
<a href="http://www.tameteo.com/meteo_Saujon-Europe-France-Charente+Maritime--1-25591.html"
target="_blank" title="Météo Saujon">Météo Saujon</a><script type="text/javascript" src=
"http://www.tameteo.com/wid_loader/0015be003c320dde2c3151f8015387e5">
</script>
Calendrier
Code HTML :
<iframe src="http://www.chez-petitemimine.fr/calendrier/paysage6.htm" width="173" height="210"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></ iframe></iframe>
Les marées :
http://maree.info/131
Page | 57 Codes HTML :
Marée de Royan
<iframe src="http://horloge.maree.frbateaux.net/ws131" width="226" height="217" frameborder="0"
scrolling="no"><a href="http://maree.frbateaux.net/" target="_top">Calendrier des marées - horaire, hauteur, coefficient de marée</a></iframe>
Marée de l’ile d’aix
<iframe src="http://horloge.maree.frbateaux.net/ws128" width="226" height="217" frameborder="0"
scrolling="no"><a href="http://maree.frbateaux.net/" target="_top">Calendrier des marées - horaire, hauteur, coefficient de marée</a></iframe>
