» Trucs et astuces conversion vidéo, diaporama photo, excel 2007

Vous avez sûrement une passion (cuisine, photo, musique, cinema,…) que vous aimeriez partager avec le plus grand nombre ! Internet est le seul média qui permette à un anonyme de toucher des millions d’internautes issus de tous les pays du globe. Pour partager cette passion avec ces millions de personnes, il faut inévitablement créer un site internet !

Pas mal de freins vous ont empêché jusqu’à aujourd’hui de vous lancer dans l’aventure de la création d’un site web:

• connaissances techniques nécessaires,
• logiciel de création de sites qui ne fait pas ce que l’on veut, 
• coût d’un hébergement et d’un achat de nom de domaine, …

Dans ce tuto je vous propose de vous apprendre à créer un site web complet et personnalisé sans connaissances techniques, sans logiciel, sans rien payer, à l’aide du service en ligne Weebly.com !

Au sommaire:

1. Projet : Créer un site web sur le film Les Affranchis
2. Créer un compte / site Weebly
3. Choisir son Design / personnaliser son haut de page
4. Créer l’arborescence du site (Nouvelle Page, Nouveau Blog)
5. Ajouter des éléments à chaque page (Texte, Titre, Photo, Video, Liens)
6. Pour Aller plus loin

Projet: Créer un site Web sur le Film Les Affranchis

Pour illustrer mon projet de création de site, je vais prendre un cas concret : Nous allons créer ensemble un site Internet dédié au film Les Affranchis de Martin Scorsese (site que je ferai évoluer par la suite). Tout ce qu’on verra pour ce thème est bien sûr généralisable à d’autres sujets: site de cuisine, site de musique, site de photo…

Si j’ai choisi Les Affranchis, c’est que je voue un culte absolu à ce film depuis que j’ai 12 ans (j’en ai 26 aujourd’hui), j’ai lu le livre original (Wiseguys) en anglais, vu le film une vingtaine de fois, acheté la BO et ai assisté à une projection en salle lorsque le centre Pompidou faisait une rétrospective des films de Scorsese (2005 / 2006).

Comme dans tout projet web, il faut en amont définir un mini cahier des charges / axes de positionnement (infos qui nous aideront à faire les bons choix ensuite), le voici:

1. Titre du site: Les Affranchis - le meilleur film de gangsters
2. Description: Videos, photos, articles, musiques, extraits sonores autour du Film Les Affranchis de Martin Scrosese
3. Cible: Cinéphiles, fans de films de Scorsese, fans de films de gangster
4. Arborescence du site : menu horizontal donnant accès aux rubriques suivantes: accueil, blog, photos, videos, musiques, ressources, livre d’or, contact
5. Couleurs dominantes: noir, rouge, gris
6. Medias et ressources externes : photos, videos (dailymotion, youtube) , musique (deezer), script js kit livre d’or

Créer un compte / site Weebly

Rendez-vous sur le site www.weebly.com, dans l’encart Sign Up Now (inscrivez-vous maintenant), rentrez un pseudo, mot de passe, email, cochez la case I accept et cliquez sur le bouton Sign Up & start creating

Ensuite, pour confirmer, écrivez les 2 messages qui s’affichent dans la barre de Captcha (chez moi: wittman 371,101)

Donnez un nom à votre nouveau site et cliquez sur continue, prenez un truc pas trop long car ça sera ajouté en préfixe de votre adresse web… Donc pour moi: http://affranchis.weebly.com

Vous devriez ensuite atterrir sur cette page (j’ai numéroté les 4 étapes clés de la phase de création)

 NB: si vous voulez juste tester le service avant de vous inscrire, c’est possible ici: http://www.weebly.com/weebly/main.php

Choisir son Design / personnaliser son haut de page

On va enfin commencer à créer !! Allez dans l’onglet Designs, survolez les différents designs et choisissez celui qui vous convient le mieux

Sachant que quand vous avez un design avec image, vous pouvez y coller votre propre image…. Pour ma part, j’ai choisi ce design avec image:

Maintenant que le design est choisi, on va pouvoir personnaliser l’image de fond et le titre du haut de page, on changera le "Home" à droite par "Accueil" quand on sera dans la partie création de pages.

Pour changer le titre, cliquez dessus et tapez ce que vous souhaitez au clavier… c’est aussi simple que ça !

Ensuite on va changer l’image de fond du haut de page qui est un peu trop funky à mon goût. Pareil on clique dessus d’abord, apparaît alors une barre horinontale sur le dessus: la header barre options

Cette Header (haut de page) Options barre nous indique que l’image actuelle fait 680 pixels de largeur sur 175 pixles de hauteur. Si on veut la changer il faut donc respecter ces dimensions.

Utilisez paint, photofiltre, ou tout autre outil d’édition d’image pour vous caler sur les dimensions qui sont affichées dans la Header Options barre… Quand votre image est prête sur votre pc, vous pouvez appuyer sur Upload pour aller la chercher.

Une fois l’image sélectionnée, faîtes ouvrir… et vous aurez alors un haut de page qui a de la gueule !

Créer l’arborescence du site

On reliste les éléments que l’on avait défini dans notre mini cahier des charges à savoir:

• accueil
• blog
• photos
• videos
• musiques
• ressources
• livre d’or
• contact

Et on va les insérer depuis la zone Pages, quand c’est du contenu blog on clique sur New Blog, quand c’est une page moins complexe (New Page)

On va d’abord renommer la page existante "Home" en "Accueil" comme ceci :

Puis on appuie sur save:

En route pour la création d’autres pages, créons d’abord le blog, je clique sur New Blog (1) puis je rentre Blog à la place de de New Page et j’appuie sur le bouton Save

NB: on n’est pas obligé d’appeler cela blog, vous pouvez donner le nom que vous souhaitez (tuto, news, …), vous aurez remarqué que je me sers d’un blog pour diffuser mes tutos, je trouve ça plus confortable comme mode d’édition.

Quand l’entrée blog est ajoutée, on nous renvoie sur la page d’accueil, les liens du menu horizontal sont maintenant: Accueil, Blog (on avait seulement home avant)

Si vous cliquez sur Blog, vous remarquerez que Weebly vous a créé la présentation typique d’un blog : accès aux rubriques sur la droite, articles au centre classés du plus récent au plus ancien. On verra comment interagir avec tout ça un peu plus tard.

On va ajouter les autres pages en retournant dans la rubrique Pages, et en cliquant à chaque fois sur New Page + ajout du nom de la page

On cliquera sur Save, une fois toutes les pages ajoutées, pour éviter de faire des va et vient permanents…. Et voilà l’arborescence finalisée (NB: on peut changer l’ordre des pages / blogs en glissant déposant les liens vers le haut ou le bas)

Et voici ce que ça donne concrètement sur notre site web… ça commence à le faire, non ?

Après le design et l’arborescence, il faut s’attaquer maintenant au contenu !

Ajouter des éléments de contenu à chaque page

Les rubriques que nous venons de créer vont être un prétexte pour s’exercer à l’ajout de différents types d’éléments de contenu :

• Dans accueil, je vais vous montrer comment  ajouter du texte, des titres, faire des liens vers les rubriques, positionner le contenu sur 2 colonnes
• Dans blog, je vais vous montrer comment publier un article (avec ajout de video, musique) et personnaliser la side bar
• Dans livre d’or, un script externe contenu dans le module HTML
• Dans contact, un forumaire de contact et un lien externe vers jeanviet.info

Tout va se passer dans la zone Elements, cliquez sur cet onglet

Accueil: ajouter texte, titre, liens internes, sur 2 colonnes

Rendez-vous maintenant sur votre page d’accueil (en cliquant sur accueil dans le menu horizontal), nous allons y ajouter des éléments, le principe est le même pour toutes les pages : on glisse et dépose les items du haut dans le coeur de page…

Ceux qui sont habitués aux hp personnalisables connaissent bien ce mouvement, qu’on utilise aussi pour déplacer un fichier sur le bureau.

On va d’abord ajouter un titre de bienvenu, on glisse et dépose le bouton Title Text dans le coeur de page

Puis on clique sur la zone de titre qui apparaît, et on ajoute son texte. Quand vous cliquez sur la zone de texte, une barre d’édition apparaît, elle vous permet de personnaliser la couleur du titre, la taille de police, l’alignement,…

Avant d’écrire mon titre, j’ai réduis la police d’un cran (clic sur "-"), mis la couleur rouge, et ai centré le titre

Pour ajouter un texte, c’est le même principe sauf qu’on glisse et dépose l’élément Paragraph, j’ai ajouté cette zone de texte sous le titre

Vous devinez peut-être mon idée, je vais créer un bloc de 4 images qui donne accès aux news, photo, video, musique… Pour cela je vais créer un tableau à 4 cellules en bidouillant avec le bouton 2 column layout qui divise la zone en 2

Le mieux, c’est que je vous montre la manip exacte en video, la voici:

Au final vous devriez avoir un tableau invisible 4 colonnes, une ligne, comme ceci:

Maintenant on va ajouter dans chaque bloc, une image cliquable qui renvoit vers la bonne rubrique, je vais expliquer les manipulations complètes pour un seul ajout d’image (il faudra répéter ces consignes pour les 3 autres images).

On glisse et dépose Picture dans la première cellule de notre tableau, comme ceci

On clique sur Click Here to Edit pour importer une photo depuis notre pc

Elle apparaît ensuite dans le bloc, on la redimensionne avec la souris pour qu’elle soit adaptée au bloc

On va définir un lien depuis la toolbar qui est apparue en haut (l’image doit être sélectionnée), en cliquant sur Set Link

On va dans Your Pages (1), pour créer un lien interne, on choisit la rubrique Blog depuis le lien déroulant (2), on clique sur Save.

On répètera cette même manip, pour les 3 autres blocs qui pointent vers photos, video, musique.

Après tous ces efforts, vous voulez peut-être voir ce que cela rend sans les marqueurs de zone, cliquez alors sur Publish (en haut à droite)

La première fois, on vous sert cette fenêtre, qui vous demande de confirmer le choix du sous domaine (affranchis.weebly.com)

Ensuite, toutes les autres fois, vous aurez le droit à la confirmation de publication

Voilà finalement à quoi ressemble ma page d’accueil, après l’ajout d’un texte avec titre et paragraphe sous mes 4 images cliquables. Pas mal, non ?

Allez ! On continue sur notre lancée pour la création d’un article de blog !

Blog: ajouter un article, personnaliser la barre de droite

Si vous êtes familier avec une plateforme de blog, vous allez trouver l’ajout d’articles et les options de personnalisation ultra simples !

On clique sur Blog depuis le menu du haut pour se retrouver face à notre blog.

Sur le blog, vous avez 3 / 4 possibiltés:

1. Publier un nouvel article en cliquant sur New Post
2. Modifier (edit) ou supprimer (delete) un article en cours
3. Ajouter un gadget dans la sidebar (menu à droite) ou  personnaliser les blocs en les sélectionnant à la souris et en les éditant au clavier

On peut tout suite changer le bloc auteur ainsi:

Maintenant concentrons nous sur la publication d’un article avec photo et video / musique ! On va repartir sur de bonnes bases, on efface l’article affiché par défaut (delete) et on clique sur New Post… Voici ce qu’on a alors à l’écran:

1. Dans la zone 1, on va mettre le titre de notre article (ex: bienvenue sur le blog des affranchis)
2. Dans la zone 2, on va pouvoir ajouter du texte, au dessus et en dessous une video ou une photo
3. Dans la zone 3, il faudra classer l’article dans une ou plusieurs catégories (séparées par des virgules si plus d’1 categorie)

Le plus simple pour ajouter des videos ou des musiques consiste à récupérer du code HTML issu d’un site de partage / streaming et de le coller dans le module Custom HTML

On glisse et dépose Custom HTML (dans Elements -> More) sous ou au dessus du bloc article, on clique dessus pour activer la toolbar custom HTML, on clique sur Edit Custom HTML

A ce moment là, on a un bloc prêt à accueillir tout type de code HTML

On peut y mettre un lecteur exportable Dailymotion ou une playliste deezer…. En ajoutant ça

J’ai le droit à ça:

Maintenant que mon article est fini, je peux cliquer sur Publish Live, puis sur Publish tout en haut à droite pour avoir le rendu fidèle de mon blog sur un navigateur !

C’est pas mal du tout ! j’ai réussi à coller une image, une playliste deezer, une video dailymotion, et le site n’a pas bronché ! chose impossible sur un skyblog (les playlistes deezer sont rejetées)…. Comme ça faisait un peu surchargé, je n’ai gardé au final que la video dailymotion (la playliste deezer a été mis dans musique)

Livre d’or: script javascript JS Kit contenu dans un module HTML

On va maintenant insérer un livre d’or externe dans la rubrique Livre d’or…. On va encore avoir recours au module Custom HTML

On glisse et dépose Custom HTML dans le coeur de page du livre d’or, on clique dessus pour activer la toolbar custom HTML, on clique sur Edit Custom HTML

A ce moment là, on a un bloc prêt à accueillir tout type de code HTML

On va y coller ce petit bout de code issu de JS Kit, ça va permettre à nos lecteurs de noter  notre site et de laisser un commentaire:

<div class="js-kit-rating"></div><div class="js-kit-comments"></div><script src="http://js-kit.com/reviews.js"></script>

Voici ce que ça donne dès que quelqu’un publie un commentaire

Créer un formulaire de contact + lien vers un site Internet

On va aller dans la rubrique contact, et on va glisser et déposer Contact Form (que l’on retrouve dans Elements -> More) dans le coeur de page

Reste ensuite à donner un titre au formulaire (Ex remplissez ce formulaire)

Ensuite, je vais ajouter un lien texte vers mon site. Je glisse et dépose alors un bloc Paragraph sous le formulaire, tape un texte et surligne avec ma souris le texte sur lequel je veux faire un lien, je clique ensuite sur le bouton lien ci-dessous présent dans la toolbar:

On clique sur l’onglet Website, comme c’est un lien externe, et on entre l’adresse à droite, puis on clique sur Save.

On publie le site, et on va regarder le rendu sur la page Contact

Pour aller plus loin

Maintenant que votre site est créé, il faut le faire connaître (obtenir des liens d’autres sites) pour que les moteurs de recherche l’indexent et que les internautes vous retrouvent ! Pour ceux qui le souhaitent, vous pouvez ajouter le nom de votre site weebly ainsi que son url (adresse http:// en weebly.com) dans le texte des commentaires de ce blog (je ferai en sorte que les moteurs suivent votre lien et indexent votre site).

Vous pouvez aussi ajouté un code de suivi stats dans Settings -> SEO -> Footer Code pour savoir combien d’internautes se rendent sur votre site… Pour ceux qui débutent, je vous recommande Get Clicky comme 1er outil de suivi de trafic gratuit.

Voilà, vous venez de créer en seulement quelques heures un premier site web avec un design agréable, sans pub, sans rien payer… Vous allez pouvoir maintenant jouer les "Jeanviet" en publiant vos conseils cuisine, montage, pc, image fashion, déco,…

(2 votes, moyenne: 3 sur 5)

 Loading ...

Dans le même genre

• Réaliser un diaporama photo sympa avec musique, images, et texte
• Extraire la racine d’une url complète sous Excel
• Télécharger musique gratuite - hit music, oldies, web radio à enregistrer en mp3
• Video sur ipod: convertir en mp4, mettre video sur ipod touch, nano, iphone
• SUPER, pour convertir toutes vos vidéos dans tous les formats