[Debutant] Jimdo - Site clef en main

Bonjour à tous !

Nombreux créateurs souhaitent ouvrir leurs propres sites pour présenter leurs œuvres. Les sites clef en main permettent, et cela sans savoir coder, de créer et personnaliser son site.
Du moins dans la limite des possibilités offertes par celui-ci ou du moins dans la limite de son imagination car il est possible de faire les choses à sa sauce en utilisant les possibilités du site, on "détourne" légèrement les fonctionnalités.

C'est ce que nous allons donc faire avec Jimdo qui est fournisseur de site gratuit qui a l'avantage de laisser la possibilité de ne pas avoir avoir de publicités.
Le nom du site ne vous appartient pas, il sera composé ainsi : www.monomdesite.jimdo.com
L'avantage de ce site est qu'il est intuitif et possède une aide détaillé.

Ce que nous allons voir dans ce tuto est donc :
- la création du site (inscription)
- les modalités de personnalisation
- comment utiliser ces modalités pour faire ce que l'on veut
L'exemple sera la création d'une fiche détaillé d'un mesh en vue de son téléchargement, nous utiliserons pour cela un tableau.

1. Création du site : inscription

Pour s'inscrire il suffit de posséder une adresse mail !
En fait la seul chose qui peut être difficile dans la création du site est de trouver un nom de domaine qui n'existe pas...
Mais ne vous inquiétez pas cela vous sera stipulé si c'est le cas.

Une confirmation va vous être demandée, histoire d'être sûr que vous n'êtes pas un robot

Voilà votre site a été créé, vous allez recevoir par mail votre mot de passe qui vous permettra d'accéder à l'administration de votre site.

Je vous conseille de garder ce mail précieusement !

2. Une interface particulière

Sur Jimdo, vous agissez directement sur la page. Vous n'avez pas d'un côté le rendu et d'un autre un back office ou vous rentrez le contenu.
En gros vous modifiez ce sur quoi vous cliquez ce qui est assez inhabituel mais pas désagréable.

Voici ce à quoi va ressembler votre site par défaut avant que vous ne modifiez tout pour en faire votre chez vous.
Afin de se repérer et de parler des mêmes choses on va définir les parties comme suit :

A. Connexion :

On ne va pas vous laisser tout bouger comme ça...
Il faut donc vous connecter. Au niveau du pied de page, vous avez un lien connexion. Cliquez dessus et entrez le mot de passe fourni dans le mail

B. Header ou En tête :

C'est la première chose que l'on voit lorsque l'on visite un site, il contient généralement le nom de celui-ci et si on le souhaite une phrase d'accroche.
Évitez d'avoir un énorme En tête, c'est ce que l'on voit en premier, pas ce qui est censé occuper la moitié de l'écran...

Lorsque l'on va passer la souris dessus, un lien va apparaitre vous proposant de le modifier.

On va s'attarder un peu plus sur deux onglets, ceux qui vous permettent d'effectuer des modifications, les autres vous proposent différents design.

Image personnelle vous permet d'importer une image qui vous est personnelle. Oui dit comme ça vous vous dites que je ne vous apprend rien.
Je profite juste de l'occasion pour préciser qu'image personnelle est une image qui vous appartient, dont vous être le créateur et non pas une image trouvée sur Internet !
Pour les étourdis vous avez à droite la dimension qui est demandée pour la personnalisation de votre En tête.


Titre va vous permettre de modifier le texte qui apparait sur votre bannière.
Vous pouvez modifier sa taille, couleur ainsi que sa position.
C'est un texte qui va être important pour votre référencement. préférez indiquer le nom de votre site par ce biais plutôt qu'avec une image. Ou au moins indiquez y des mot clefs importants.

C. Menu :

Même principe que précédemment en ce qui concerne le menu. Au survol vous allez voir apparaitre l'option Modifier le menu, cela va vous permettre de modifier la hiérarchisation de celui-ci, ajouter ou supprimer des pages. Cela n'influe en rien sur sa mise en forme.

Quand vous cliquez sur modifier, vous voyez apparaitre le menu sous forme d'arborescence. Nous allons détailler les options en nous référant aux cadres de couleur visibles sur l'image.
En bleu : Cela modifie l'ordre du menu, les flèches permettent de faire monter ou descendre la page sélectionnées. L'ordre du menu correspond à ce que vous voyez au niveau de l'arborescence.
En rouge : Cela modifie les niveaux du menu. Les différents retraits indiquent la profondeur de vos pages. Ainsi La page Exemple est de niveau 1et permet d'accéder à la page Voyages de niveau 2. Les pages Rando à skis et Tour de voile sont de niveau 3 et ne sont visibles que depuis la page Voyages.
En utilisant les flèches on peut changer le niveau de ces pages.
En vert : On ajoute une page.
En rose : On supprime une page.
En jaune : Cela permet de visualiser la page.

Une fois les changements effectués, il suffit de cliquer sur enregistrer.

D. Cadre lateral :

Jimdo est gratuit mais propose des versions payantes. Lorsque vous explorerez votre interface d'administration vous verrez ses nombreuses possibilités et également pour certaines la possibilité de passer à une offre payante. Mais rassurez vous avez ce qui est gratuit vous avez déjà de quoi faire.

Ainsi le cadre rouge vous propose de masquer la publicité : c'est payant donc laissez tomber !

Le cadre bleu vous permet d'ajouter de nouveaux éléments. Nous allons voir cela plus en détail dans un instant.

une dernière chose c'est dans ce cadre latéral, juste au dessus de la pub qu'apparaitra votre menu contextuel. C'est à dire les sous pages qui existent par rapport à la page sur laquelle on se trouve.

E. Contenu :

Chaque éléments de la partie contenu est modifiable lorsque l'on clique sur elle.
Vous pouvez les modifié via le menu qui se trouve sur la droite ou les déplacer en plaçant votre souris sur la partie droite du cadre.

Concernant le menu latéral on retrouve la même signalétique que pour la modification du menu :
En bleu : Cela modifie l'ordre du menu
En rouge : On supprime l'élément.
En vert : On ajoute l'élément.


Voici un aperçu des différents éléments que vous pouvez ajouter :


Les titres étant explicites, à moins que quelqu'un en face la demande je ne vais pas les passer en revue. Seulement trois éléments dans une troisième partie pour notre construction d'une fiche pour la présentation et le téléchargement de mesh. Nous verrons alors Tableau,Image, Téléchargement et Widget/HTML.

3. Menu de configuration :

Vous trouverez celui-ci à droite de votre écran. Certains des menus présentés n'ont d'intérêt que pour les version payantes.
Nous allons nous intéresser à 3 des menus, ceux qui ont trait à la présentation et à la mise en forme (Design et Style) et celui des paramètres qui vous sera utile pour configurer votre page contact.

A. Design :

Les onglets Mise en Page et Design Spéciaux vont vous proposer différentes mise en page.
Vous pourrez modifier par la suite les couleurs et les images, votre choix doit se porter sur le positionnement des éléments et l'architecture du site.
Voulez-vous un site qui occupe toute la largeur? deux colonnes ou trois colonnes ? la navigation à droite ou à gauche ?
Ce sont ces questions que vous devez vous poser en particulier pour la mise en page, vous pourrez personnaliser ensuite


L'onglet Design personnel, vous permet si vous avez des connaissances en HTML et CSS de coder directement. Cela permet donc une personnalisation plus pointue et avancée.
En sous menu vous avez :
- HTML : l'architecture du site
- CSS : l'habillage (couleur, police, style)
- Fichiers : gestion des fichiers images

ici une vue de l'onglet HTML.


A noter que vous trouverez toujours une utilité pour la feuille CSS. En suivant des tutos (à venir) sur le CSS vous pourrez créer vos propres styles et les appliquer ensuite lorsque vous créerai vos contenu. On créé une fois un style et ensuite il n'y a plus qu'à l'appliquer autant de fois qu'on le veux.
Ce qui est d'autant plus pratique si vous utilisez par la suite les widget/HTML

La gestion des fichiers va vous permettre de télécharger des images. Vous pourrez ensuite utiliser leur adresse pour les utiliser dans votre mise en page. Nous en reparlerons lors de la création de la fiche pour mesh.

B. Style :

Vous allez pouvoir agir sur la manière dont est présenté tout ce qui est écrit dans votre site. Que ce soit les liens ou la police.
Vous pouvez utiliser un style pré-formaté ou alors paramétrer chaque élément qui le constitue :
- texte
- titre
- sous-titre
- liens
- séparation


C. Paramètres :

Sur la page Contact on vous demande de vérifier que vous avez bien renseigné l'adresse mail à laquelle on doit vous adresser les messages.
C'est dans l'onglet Paramètres, section utilisateurs que vous pouvez l'indiquer (encadré en rouge)
Au cas où, j'ai également encadré l'option qui vous permet de supprimer votre site.


Voilà pour les principaux éléments qui vont vous permettre de personnaliser votre site.
Le site par défaut contient dans son menu Jimdo, vous y trouverez une aide détaillé qui vous permettra de prendre en main votre site.
Nous avons vu ici les principales fonctionnalités. S'ils subsiste des questions, je vous encourage à ouvrir une demande d'aide dans la partie apprentissage du forum. Ou si cela reste général et peut améliorer le tuto posez là à la suite.

ne partez pas cependant, e n'est pas fini, nous allons à présent voir un cas pratique que vous montreras comment on eut utiliser les fonctionnalités de base d'un site pour faire ce que l'on veut ou du moins allez plus loin

4. Détourner les fonctionnalités de base pour aller plus loin : cas pratique une fiche de téléchargement de mesh

Pour faire ceci, nous allons utiliser 3 des fonctionnalités de base du site :
- image
- téléchargement
- tableau

Pourquoi ces trois là ?
Car dans un tableau, on ne nous laisse pas la possibilité de mettre une image.
Les liens pour le téléchargement contiennent trop d'informations, du moins des infos superflus (type de fichier, son nom complet) sans qu'on puisse avoir un simple lien.
Image va nous rendre service ici, mais l'on pourrait tout aussi bien utiliser la gestion des fichiers disponible via le menu design. La manipulation est semblable (je vous indiquerai en quoi). mais pour la démo on va passer pas la fonctionnalité de base.

Qu'allons nous faire ?
Un tableau qui présente une image du mesh, des informations le concernant et des liens pour le téléchargement.

A. Téléchargement :

Nous avons donc appuyé sur + et choisi dans le menu téléchargement, une fenêtre se présente donc à nous...
A savoir que l'aperçu n'apparait qu'une fois que vous avez cliqué sur Transférer le document, en fait si vous oubliez, il ne se passera rien.
Pour la démo j'ai indiqué un titre et une description afin que vous voyiez ce que ça donne mais dans notre cas, cela ne nous servira à rien.


Et voilà ce que cela donne sur la page.


Au niveau du Bas de page, vous avez sur la droit un lien Afficher qui se transforme en Modifier quand vous visualisez votre page, et cela sans que l'on vous propose les option au survol de la souris.

B. Tableau :

Voici le tableau auquel vous avez le droit par défaut. L'intitulé des colonne est mis en gras et à part ça, il ne se sont pas cassé la tête pour la présentation. On va voir comment modifier le tout.


Mais avant cela on va regarder de plus prêt la barre d'outil. je ne vous fais pas le détail, laissez votre souris dessus et vous aurez une description, des fois que les icônes ne soient pas assez explicite.
On va voir ce qui va nous servir pour le tutoriel.

1. Créer un lien
2. Rompre un lien : le texte redevient un texte normal
3. Gomme : efface les modifications apportées quant au style, la couleur, la police, etc...
4. HTML : permet d'accéder au code HTML de votre tableau pour agir au coeur de celui-ci ou faire un petit copiié/collé, ça peut être bien utile...
5. Créer un tableau
6. Modifier la ligne : modifier le style de celle-ci
7. Modifier une cellule : modifier le style
8. Fusionner des cellules : vous en aviez 3 et maintenant il n'y en a plus qu'une


Bon on va commencer avec la modification de ligne. La ligne modifier correspondra à la ligne horizontal qui contient la cellule ou votre curseur se trouve.
On va s'intéresser à l'onglet Avancé, l'onglet Général va vous permettre de modifier l'alignement de votre texte et la hauteur, rien de palpitant dans ce menu.
En revanche depuis l'onglet Avancé on va pouvoir modifier la ligne en indiquant un id (correspondant à un style créé dans la feuille de style [CSS]), mettre une image en arrière plan ou une couleur. Ce qui est déjà plus sympa pour la personnalisation !
Image de fond : vous devez copié l'adresse de l'image concernée (donc elle doit être hébergée au préalable)
Couleur de fond : en cliquant vous accéderez à des palettes de couleurs qui vous permettront de choisir la couleur.

Voyons à présent la modification de cellule.
Cela va nous permettre d'indiquer pour chaque cellule sa taille, la bordure et son style. ON peut agir sur une cellule ou sur toutes les cellules rassurez vous. Pour l'occasion nous allons voir les deux onglets: général et avancé

Au niveau de l'onglet Général, nous allons toujours pouvoir modifier l'alignement du texte mais également indiquer une taille spécifique à notre cellule.
En l'occurrence j'indique la taille correspondant au format de l'image que j'ai choisi d'insérer.
On peut aussi indiquer la class, qui comme l'id est un élément de style que l'on peut renseigner dans la feuille CSS.


Au niveau de l'onglet Avancé, on retrouve les fonctions vu précédemment pour la modification de ligne. Ce qui nous intéresse ici est la possibilité de choisir la bordure pour la cellule.
Mais ce qui nous intéresse au final est de déterminer une bordure pour TOUTES les cellules. cela est possible via le menu déroulant placé en bas de la fenêtre et qui nous offre plusieurs choix. Dans notre cas on sélectionne : Mettre à jour toutes les cellules du tableau.


Voilà ce que donne les modifications apportées sur les lignes et les cellules que nous venons de voir.
J'avais au préalable sélectionné deux cellule et fusionné celles-ci.

Bien on laisse les choses ainsi pour le moment...

C. Image :

Voici à quoi ressemble la fenêtre qui permet d'insérer une image.
Plusieurs fonctionnalités vous sont offertes. Dans notre cas on utilise le widget uniquement pour mettre en ligne une image, donc on récupère l'image sur son ordinateur et on transfère l'image.


D. Base de départ :

Notre but est de faire une fiche avec un image du mesh, des liens pour le téléchargement et des informations. A présent nous avons tout ça avec une image mise en ligne ainsi que des fichiers.
Si nous avons du préparer tout ça au préalable c'est parce que l'on ne peut pas depuis le menu tableau ajouter une image ou ajouter un téléchargement.
A présent nous avons tout ce qui nous faut et ceci sans avoir à passer par un tierce site de téléchargement.

E. Atelier bricolage :

Nous allons dons opérer sur notre tableau afin d'y mettre nos images et lien de téléchargements.
Pour cela nous avons besoin de récupérer des informations, vous allez le voir, e principal de ce travail de titan qui nous attends c'est... copié/collé

Donc on va faire des petits aller/retour entre l'affichage du site tel que le voit vos visiteur et l'interface de modification.
Je vous rappelle que le lien se trouve au niveau du Bas de page :


On ne va rien faire de compliquer, il faut juste être organisé, soyez attentif la première fois et vous allez vite vous rendre compte que c'est un jeu d'enfant.

On doit d'abord récupérer l'adresse de notre image. Donc on affiche le site, la souris au niveau de l'image et clic droit de la souris

On retourne dans l'interface administrateur, le lien dans le bas de page est modifier.
On clique sur le widget du tableau et au niveau de la barre d'outil on clique sur l'icône HTML


Voilà ce que cela donne. pas de panique pour vous repérer vous n'avez qu'à chercher le texte qui se trouve dans la cellule lorsque vous l'avez en visuel. Pour l'exemple, le texte est cellule fusionnée
Vous allez selectionner ce texte et y coller à la place l'adresse de l'image. Pour cela soit un clic droit de la souris et coller soit CTRL+V (pc) ou cmd+V (mac)

Et voilà ce que cela donne une fois que vous Enregistrez les changements.


Bon pour l'image voilà qui est fait, vous pouvez supprimer le widget qui nous a servi à télécharger celle-ci, il ne nous sert plus à rien.

Vous avez compris le principe ?! Bien nous allons faire EXACTEMENT la même chose pour les liens :
1. Afficher le site
2. Clic droit sur le lien du téléchargement et copié l'adresse du lien

3. On retourne dans l'interface administrateur
4. On retourne sur le widget Tableau et on positionne le curseur sur la cellule qui va contenir le lien
5. On ecrit le texte qui sera cliquable pour le téléchargement
6. On sélectionne le texte qui servira de lien et on clique sur l'icône Créer un lien, ce qui nous affiche cette fenêtre :


Il s'agit dans notre cas d'un lien externe, on colle le lien dans le champ et on clic sur créer un lien


Et voilà vous avez fini avec le lien, comme l'image vous pouvez supprimer ce widget il ne vous sert plus à rien.

Une fois que vous avez les éléments insérés, il ne vous reste plus qu'à ajuster les dimensions des cellules, ajouter des lignes selon vos besoins pour fignoler votre tableau et mettre les informations.
Voilà ce que cela donne une fois fini, un tableau simple mais avec les informations organisées et rien de superflus.


A vous bien sûr de faire quelque chose qui vous ressemble et stylez comme vous en avez envie !

Un dernier conseil, une fois que vous avez votre tableau idéal, cliquez sur l'icône HTML, faites un copié/collé du code et enregistrez le dans avec votre bloc note.
Là où doivent se copier les liens écrivez : lien image, lien package, lien simspack.
Ainsi quand vous avez un nouveau mesh, vous copié le code de votre tableau et vous n'avez plus qu'à rajouter les liens.

J'espère que ce tutoriel vous aura été utile.
Si des passages ne sont pas clairs, qu'il vous manque des éléments ou que vous avez des questions pour aller plus loin, n'hésitez pas à les poster. le tuto sera modifié en fonction et les questions réponses le compléteront  
Si vous avez besoin d'une aide personnalisées, créez un post dans la partie en question

Post pour d'éventuelles questions/réponses

beau travail mais je dois avouer que comme ça , c'est un peu du charabia pour moi , pour mieux comprendre , il faudra que j'essaye le jour où je pourrai mettre un set complet en téléchargement mais pour le moment ce n'est pas possible car je me connecte à partir d'une clé et si c'est trop volumineux ça met des plombes à charger

Je peux te faire un cas pratique avec ton set si tu veux en aide perso, ou alors quand tu tentera on voit ce moment là

Merci Fu pour le tuto!

Fuyaya a écrit:

Je peux te faire un cas pratique avec ton set si tu veux en aide perso, ou alors quand tu tentera on voit ce moment là

Merci pour ton aide , on verra à ce moment là ce sera pus simple

Merci pour ce tuto Fu' !

Merci beaucoup pour ce tuto! Il m'a bien servi.

Tant mieux si au fur et à mesure de votre expérience de jimdo vous avez des questions faites m'en part, je pourrai toujours m'y replonger

Eh bien , j'en ai une il y a certaines personne comme Maripiou par exemple qui ont mis un bouton téléchargement sur leur site , pour cela elles ont dû passer par un hébergeur , j'aimerai si cela est possible sans passer par un hébergeur d'images

Fuyaya - merci c'est gentil.

Maman gateau - je me permets de te répondre. ^^

Pour mettre mon bouton de téléchargement sur mon site, j'ai simplement crée une image, puis j'ai intégré le lien url du fichier pour que les gens, en cliquant sur le bouton, lancent le téléchargement.

ça je sais mais tes créations tu les as mises sur un truc du genre Médiafire , je demandais si c'était possible sans passer par là

Aaah ok j'avais compris hébergeur photo.

Médiafire est un hébergeur de fichiers en tout genre. C'est très pratique et en plus tu peux ranger tes fichiers par dossiers.
Comment faire sans? A vrai dire je ne sais pas... il faut bien que tu envoies ton fichier sur le net pour que les gens puissent le trouver, surtout si c'est des gros fichiers...

maman gateau >> SI ut as une adresse Windows Live, tu peux utiliser le service Windows Live SkyDrive, qui te donne droit à 25Go d'espace disque gratuitement

Parce que oui, tu es obligée de passer par un hébergeur extérieur...

merci

Concernant l'hébergement de fichier, tu dois les rendre disponible aux autres en les mettant sur le réseau internet. Pouvoir récupérer un fichier en local sur ton ordi entrainerait de grosses failles de sécurité.

Ensuite on doit discerner les différents types d'hébergement :
- mediafire and co : tu met ton fichier en ligne et on te donne une adresse URL
Ce sont des espaces de stockage gratuit, par contre tu es tributaire de leur trafic et problèmes techniques

- il y a pas mail de fournisseurs de services (neuf, free) qui te proposent ton espace de stockage ou tu peux donc mettre tes fichiers. Tu peux là aussi récupérer une URL.

- ceux qui ont un site internet (non gratuit) utilisent l'espace pour y stocker leurs pages mais également leur fichiers.

Et visiblement comme l'indiquait Tchou il y a d'autres services qui le propose.
Le mieux à mon sens est de te renseigner par rapport à ton offre internet, voir si tu as un espace de stockage personnalisé. Cela te permettra de vraiment gérer facilement tes fichiers et avoir un meilleur trafic, les sites gratuit peuvent être facilement saturés.