Créez votre site pour 0€ par an, possible ?

creation-site-internetVous souhaitez créer un site internet, mais plusieurs obstacles se dressent devant vous, parmi lesquels la façon de faire vos pages, de les visualiser, l’achat d’un nom de domaine et un hébergement à choisir, la méthode pour publier votre contenu et le coût de tout cela …

Ce diaporama nécessite JavaScript.

Bref, c’est parfois un parcours du combattant dans lequel beaucoup baissent les bras. Il existe des formules prêtes à l’emploi pour pas très cher, mais est-il possible de faire son site et de le publier gratuitement ? Et quels sont les avantages et les défauts de cette méthode ?

Je vais vous démontrer que ce n’est pas compliqué, et possible de le faire dans un premier temps gratuitement, et dans un second temps avec un nom de domaine payant pour lequel nous allons trouver le moins cher du marché, soit moins de 1€/an, tout le reste sera gratuit !

Bonne nouvelle donc pour ceux qui pensaient qu’un site couterait une somme astronomique et une formation de codeur, mais commençons par le commencement, à savoir que le site que vous allez créer aura tout de même quelques limites. Par exemple, il vous sera compliqué d’ajouter du php (nécessaire si vous souhaitez par exemple ajouter un formulaire de contact, ou une action automatique avec une base de données MySQL) ou justement difficile aussi d’y ajouter une base MySQL (ce sont des fichiers qui requièrent des scripts automatiques, par exemple vous modifiez le contenu d’une page page et votre base de donnée va elle-même modifier toutes les pages associées à ce modèle) . Ceci étant dit, nous pourrons contourner assez facilement ce problème par d’autres astuces que nous verrons plus loin.

Avant de nous lancer dans du made in soi-même regardons les prix proposés (nom de domaine + hébergement +site builder) nous prendrons pour chacun la formule de base à savoir un nom en .fr et un hébergement mutualisé (partagé)  :

Chez 1&1 : 14,26€ /an au lieu de 26€/an (10 Go d’hébergement) + nom de domaine (promo jusqu’à fin septembre 2014)

Chez Netissime : 18€ / an (25 Go d’hébergement) + Nom de domaine

Chez OVH (On Vous Héberge) : 28,68€ / an (100 Go d’hébergement) + Nom de domaine

Donc si vous avez vraiment besoin d’un site sans vous compliquer la vie, le plus simple reste 1&1 en cemoment mais 26€/ an des l’année suivante, ou Netissime, au prix fixe de 18€/ an. Les prix sont très abordables, et vous proposent assistance, webmail personnalisé et possibilité de domaines garés, sous-domaines etc … Cependant vous pouvez choisir de l’héberger par vos propres moyens et c’est ce que nous allons voir à présent pour ceux qui veulent expérimenter.

De quoi aurais-je besoin ?

BoiteOutils_1005WC001

Si votre site ne vous coûte rien ou presque selon vos choix, demeure quand même la nécessité de le faire, et là vous devrez quand même fournir un minimum d’efforts que je vais vous aider à minimiser grâce à un site builder

1) Vous aurez besoin d’un éditeur de html (gratuit)

Notepad+++ pour Pc,  Fraise pour Mac, Qui vous servira à ouvrir les fichiers html sur votre bureau et à les modifier en prévisualisant les modifs en temps réel.

Solution la plus propre :

Téléchargez un template de site gratuit, en voici une cinquantaine à télécharger librement. Pour l’exemple j’ai choisi le modèle Arcana, simple et joli mais quelque soit votre choix, la manip sera ensuite la même, à savoir :

-1- Une fois téléchargé, vous avez un dossier comprenant plusieurs fichiers, n’ayez pas peur, vous n’aurez que très peu de ces fichiers à retoucher, JS et css étant déjà remplis, vous ne devrez apporter des modifications que dans les pages « html » que vous aurez ouvert avec votre éditeur de texte :

Détail des fichiers composant votre site.
Détail des fichiers composant votre site.

L’index est votre page d’accueil, les autres fichiers html sont les pages de votre site. Pour notre manip, je ne ferais que la page d’accueil, laissant les autres telles qu’elles sont dans les fichiers. Toutes les images que vous utiliserez devront être installées dans le dossier « image ». N’oubliez pas que vous devrez installer ce site, et donc modifier les urls correctes (sur votre éditeur de texte) dans les scripts pour ne pas avoir de mauvaises surprises 😉

Fraise est un  éditeur que j'utilise, il permet de visualiser en temps réel les modifications apportées sur les scripts.
Fraise est un éditeur que j’utilise, il permet de visualiser en temps réel les modifications apportées sur les scripts.

2) Vous aurez également besoin d’un éditeur d’images (gratuit) facultatif mais fortement recommandé si vous souhaitez personnaliser des images, des bannières, et toutes sortes d’éléments visuels pour donner à votre site un aspect présentable et plaisant. Vous trouverez votre bonheur dans notre article dédié à ces utilitaires gratuits, si vous n’en n’avez pas déjà, je vous conseillerais alors le plus intéressant photofiltre  (usages multiples, facilité d’utilisation, gratuit et compatible).

3) Vous aurez bien entendu besoin d’un hébergeur (gratuit) c’est l’endroit ou vous installerez votre site afin qu’il soit visible par tous les internautes du monde lorsqu’ils saisiront votre url ou le chercheront en ligne. Vous pouvez aussi héberger votre site en local sur un disque dur externe (mais lorsque vous couperez l’ordinateur, votre site ne sera plus accessible par vos visiteurs, ce n’est pas la meilleure solution).

L’hébergeur, il en existe beaucoup de payants, et quelques-uns de gratuits, mais ces derniers en contrepartie vous collent de la pub. Il y en a deux qui sont très bien : Free jusqu’à 10 Go d’hébergement, et Dropbox.
Pour héberger votre site sur Free :
Si vous avez un abonnement chez free : Suivez ce tuto proposé par Free pour vous lancer dedans !
Si vous n’avez pas d’abonnement free, créez un compte accès gratuit gratuitement ici .

Pour héberger votre site sur Dropbox :

( Attention, cette possibilité ne sera plus valable à partir du 03 octobre 2016 détail )

Si vous n’avez pas de dropbox, en vous inscrivant depuis ce lien vous disposerez de 3,5 Go, ça parfait peu, mais pour un site statique c’est amplement suffisant, et si vous invitez des amis à vous à s’inscrire sur dropbox, vous augmenterez de 500 Mo votre espace dispo sur votre dropbox !

Nous allons prendre l’exemple dans lequel mon site sera hébergé sur Dropbox.

J’ouvre donc mon compte Dropbox, et je vais installer mon dossier Arcanna (sans le renommer ) dans le dossier « public » de ma dropbox pour pouvoir le partager.

Le site est bien sur ma dropbox
Le site est bien sur ma dropbox
ouvrez le dossier, faites un clic droit sur le fichier index.html et copiez le lien public
ouvrez le dossier, faites un clic droit sur le fichier index.html et copiez le lien public

A cette étape, votre site est créé, votre hébergement est fait, ne reste plus qu’à le partager. C’est ici qu’il faut faire un choix pour votre nom de domaine car en l’état votre url est plutôt étrange la mienne étant : https://dl.dropboxusercontent.com/u/5497711/html5up-arcana/index.html

Pour faire ensuite des modifications, sélectionnez le fichier concerné et clic droit : « ouvrir avec … » et choisissez votre éditeur de texte.

4) Vous aurez besoin d’un nom de domaine gratuit (mais avec une url étrange), ou payant pour moins de 1€/an (sans extension), ce nom de domaine est important car il est la première chose qu’on voit, qu’on cherche. Pour ma part, l’achat d’un nom de domaine (si votre site est un site vitrine ou une carte de visite pour d’éventuels clients) est vivement recommandé car il fait plus pro et plus sérieux, à vous de voir ce qui vous convient le mieux. De plus le fait d’acheter un nom de domaine reste une facilité pour vous retrouver sur internet.

creation-de-site-internet-id662

Pour l’url personnalisée gratuite, rendez-vous sur Bitly et créez votre compte. Ensuite tout en haut de votre page dans la boite de dialogue :  » past a long url to shorten » entrez votre url et cliquez sur le poisson-lune, vous pourrez modifier votre adresse, par exemple j’ai réduit celle de l’url du site que j’ai fait et hébergé sur ma dropbox qui ressemblait à ceci : https://dl.dropboxusercontent.com/u/5497711/html5up-arcana/index.html   par  http://bit.ly/sitecouloirs .

Pour l’achat d’un simple nom de domaine, je vous conseillerais lsx.fr qui offre deux avantages : votre nom de domaine en .fr à 0,99€ / an et deux adresses mail associées de 2 Go chacune (par exemple contact@monsite.fr, et webmaster@monsite.fr). Reste ensuite à vous connecter à Lsx et d’appliquer une “redirection de domaine” vers votre lien public du  site sur Dropbox. Utilisez “redirection avec masquage”. Ce qui donnerait dans mon cas http://www.couloirsdunet.fr, un site accessible, sans pub, avec mail personnalisé et surtout, les dns permettrons de le trouver d’une simple recherche sur Google et autre moteurs, ce qui n’est pas toujours évident avec une url raccourcie !

Et ces fameux scripts php et mYsql ? Y sont ou ?

ob_7b3f8e4bd3e610e0a2fd097f185a6a68_cerise-sur-le-gateau

Pour la base de donnée, si votre site n’a pas des centaines de pages, il vous suffit de faire votre première page modèle (article.html par exemple) et ensuite de dupliquer cette page en la renommant 1.html, 2.html, 3.html etc … Vous n’aurez que son contenu à modifier article après article.

Et pour le php,  vous pouvez tout simplement utiliser des logiciels en ligne gratuits qui vous permettront de créer une newsletter comme Mailchimp que j’utilise et vous permet d’envoyer jusqu’à 2000 newsletters par mois avec un newsbuilder intuitif, et pour un formulaire de contact, vous pouvez utiliser YMLP qui est également gratuit et vous offre une grande capacité de gestion de formulaires. Aucun de ces deux outils ne vous demandera de fournir de code 😉 . Et pour eux, un simple script généré restera à installer là ou vous souhaitez qu’il figure (page contact par exemple).

Ces deux derniers feront l’objet d’un prochain article plus détaillé pour vous aider à optimiser ces technologies complémentaires et rendre votre site gratuit au plus proche d’un site pro !

Encore une chose, pour les templates, si vous ne trouvez pas votre bonheur dans la liste que je vous propose plus haut, vous en trouverez d’autre ici, ou et encore une centaine par ici ! La méthode restant la même.

A vous de jouer, à vous de voir c’est tout simple et je reste à votre disposition pour un complément d’informations !

Publicités

28 commentaires Ajouter un commentaire

  1. Florian.D dit :

    Bonjour,

    C’est encore moi avec une question plutôt importante : j’ai créé une page en suivant votre article (très bien fait je dois dire !) et en m’aidant d’infos trouvées par-ci et par-là notamment des modèles Bootstrap existant (pour une personne qui découvre, c’est utile et en deux jours j’obtiens une page au top).

    Seulement, aujourd’hui je n’arrive pas à partager l’index via Dropbox. L’option « Lien public » ne m’est pas proposée et je ne peux que partager un lien vers le fichier, ce qui casse la mise en page du site (sûrement le lien avec le fichier CSS qui est rompu ?).
    Sauriez-vous m’aider ?
    Merci d’avance !

    J'aime

    1. Florian.D dit :

      Décidément, je me réponds encore à moi-même : l’option dossier public n’existe plus pour les compte Dropbox créés après 2012.
      Je vais donc me tourner du côté de Free ou si jamais vous avez une autre idée, n’hésitez pas à me le faire savoir !
      Merci encore !

      J'aime

      1. Steve dit :

        Bonjour, mince, pour Dropbox, je l’ignorais, je l’utilise donc depuis si longtemps ?
        Pas grave, d’autres solutions existent, mais il me semble que du coup l’utilisation d’un FTP s’impose pour transférer le site créé sur les adresses suivantes :
        Quelques hebergeurs de sites gratuit:
        webou avec un espace de stockage de 250 Mo (c’est peu, mais bien assez pour des scripts), et si les images sont lourdes, il faut les alléger au max.
        Ici vous pouvez diviser jusqu’à 10 le poids d’une image 😉 Quand aux vidéos (s’il y en a), le mieux est de les héberger ailleurs et de faire un lien dans les pages HTML.
        Olympe est également un bon héberger de site gratuit, avec 500 Mo et jusqu’à 2 Go (sur demande si justifié) ce qui largement assez.
        * Au cas ou vous n’auriez pas de nom de domaine (en restant sur le principe que même 1€ c’est trop cher pour un site 🙂 )en priorité, renommez votre index.html (pour moi ça serait par exemple couloirsdunet.html) afin que l’url soit plus esthétique que « index.html ».
        N’oubliez pas dans ce cas de rediriger les renvois (menus des pages vers l’accueil) à ce nouveau nom donné et remplacer partout dans les pages html l’index.html par votre nouveau nom.
        Bonne continuation, et si vous le souhaitez, laissez un lien vers votre site que j’aille y faire un tour et vous donne mon retour dessus.
        Je pense qu’un nouvel article pour moi s’impose pour compléter la création d’un site gratuit …
        Modules, extensions, hébergement du site, des vidéos … Un bon gros travail à mettre en ligne tout ça !

        J'aime

      2. Florian.D dit :

        Bonjour Steve et merci encore pour toutes ces petites astuces, comme alléger les photos, ça peut s’avérer pratique !

        Pour l’hébergeur, j’ai évidemment fait des recherches en parallèle et pour la plupart ils sont faussement gratuits.
        Pour l’instant c’est en création du côté de Free pour voir ce que cela donne. La création d’un nom de domaine sera un plus mais pas forcément nécessaire (même si pour 1€, ça ne coûte presque rien). Pour Olympe (qui s’avérait être prometteur), plus aucune inscription n’est possible malheureusement.

        J’ai (encore !) une question : l’objectif de ce site étant d’être un support informatique pour un journal étudiant (qu’on diffuserait premièrement au sein de la fac et qu’on aimerait diffuser à d’autres fac).
        Quel serait le meilleur moyen pour effectuer l’envoi de mail mensuel pour dire grosso modo « le n°X du mois Y est enfin là! » ? Newsletter je suppose mais comment faire pour que les visiteurs du site puissent renseigner leurs infos qui vont directement alimenter la base de données ?

        Je me pose la question de savoir si un groupe de diffusion sur une boite mail n’est pas finalement plus simple à tenir, même si le problème d’ajout de nouvelles personnes me semble compliqué… (les personnes voulant s’inscrire directement depuis le site internet).

        J’ai l’impression que mes questions ne sont pas très claires, mais je suis moi-même perdu dans toute cette affaire de newsletter ^^’

        Dès qu’il sera en ligne, je vous le ferais parvenir sans problème !

        J'aime

      3. Steve dit :

        Bonjour Florian,
        Alors pour l’ajout directement d’un bouton d’abonnement sur le site, ça s’avère un peu plus compliqué car vous aurez besoin de créer une base de données annexe.
        Ce sont les fameux fichiers paswd.
        Pratique pour que chacun puisse créer son compte, mais là c’est déjà l’artillerie lourde.
        C’est pourquoi j’utilise plutôt un autre moyen Mailchimp :
        Gratuit vous pouvez envoyer jusqu’à 2 000 newsletters, ces newsletters sont 100% personnalisantes, et vous pouvez également créer un système d’abonnement à la newsletter du site créé.
        Ainsi, sans base de données supplémentaire, vous pouvez garder informé vos abonnés.
        Par la suite si vous avez plus de 2 000 abonnés vous pouvez souscrire à des forfaits pros, mais 2000, la fac tiendrait déjà, non ?
        Et par la suite vous pouvez faire participer les abonnés sous forme d’adhésion payant annuelle (1€/an) ce qui même pour des étudiants ne représente pas grand chose et permet amplement de financer le site pour ses newsletters, et ouvrant droit aux payeurs de bénéficier d’avantages (concours avec lots, ou possibilité de faire une publication (annonce par exemple) …
        Ensuite l’imagination aidant tout est possible pour justifier le coût dérisoire 🙂
        Avec Mailchimp, vous pouvez donc proposer sur une page du site (contact/newsletter) un formulaire, une newsletter gratuitement au départ.
        Et dans l’outil de gestion Mailchimp, vous pouvez même proposer aux inscrits de choisir leur statut (Intervenant, étudiant, visiteur …) ce qui les rangera dans la catégorie de contacts qu’ils auront choisi et vous permettra d’envoyer des newsletters uniquement aux étudiants, ou aux intervenant, ou encore aux visiteurs …

        En synthèse, vous pouvez commencer gratuitement avec 2 000 abonnés et 12 000 envois/mois (soit 1 envoi/semaine à chacun d’entre eux).
        C’est chouette non ?
        Vous êtes à quelle Fac ? Sur Paris ?

        J'aime

  2. Florian.D dit :

    Mes recherches de la journée ont également penché vers Mailchimp. Pas de soucis pour les 2000 abonnés, sauf si mon site s’avère performant au point de faire rappliquer autant de monde ^^ D’autant plus que ça serait maxi 2 envois/mois.

    Je vais regarder de plus près, notamment si on peut ajouter un « Widget » permettant de remplir le formulaire, ça serait parfait !

    Je suis à la fac de Bobigny, rattaché à l’Université Paris 13, en Master 2 Maintenance Qualité Sécurité Environnement 😉

    J'aime

    1. Steve dit :

      Ce formulaire existe bel et bien je l’ai utilisé.
      C’est un petit script (sans codage requis) qu’il suffit de personnaliser.
      Ensuite récupérer le code « embed » et le coller dans le body de la page du formulaire (d’abonnement).
      Super pour le M2 je vais recevoir en décembre les M1 / M2 et les DD des IEJ de Paris (pour ceux en Droit) qui auront passé leur CRFPA en vue du CAPA.
      Pour vous c’est presque le bout du chemin !!!
      N’hésitez pas en cas de besoin 🙂

      J'aime

      1. Florian.D dit :

        Effectivement, j’ai créé la newsletter (ou presque, me reste à créer ce qui constitue réellement cette newsletter : la « campagne »).
        Mais une question m’amène, une image sera plus parlante : http://hpics.li/803bf2b

        Cette barre de navigation vient d’un modèle que j’ai trouvé sur internet, sauf que d’une page à l’autre la petite flèche ne suit pas l’onglet actif. J’ai beau cherché dans le CSS, je suis battu sur ce coup.

        Pour moi ça ne peut être que dans ces lignes là :

        .blog-masthead {
        background-color: #428bca;
        -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
        box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
        }

        /* Nav links */
        .blog-nav-item {
        position: relative;
        display: inline-block;
        padding: 10px;
        font-weight: 500;
        color: #cdddeb;
        }
        .blog-nav-item:hover,
        .blog-nav-item:focus {
        color: #fff;
        text-decoration: none;
        }

        /* Active state gets a caret at the bottom */
        .blog-nav .active {
        color: #fff;
        }
        .blog-nav .active:after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -5px;
        vertical-align: middle;
        content:  » « ;
        border-right: 5px solid transparent;
        border-bottom: 5px solid;
        border-left: 5px solid transparent;

        Autant j’arrive plutôt bien à bidouiller les fichiers html, autant le .css arrive à avoir raison de moi ^^
        Une idée ? Je peux envoyer les fichiers au besoin si vraiment ça peut vous aider (et m’aider par la même occasion !).

        Merci encore pour tout votre aide Steve ! 😉
        PS : je n’ai pas tout compris le paragraphe qui concerne les M1 et M2 en Droit. Vous faites des interventions en Fac ?

        J'aime

      2. Steve dit :

        Ha non pas du tout, en fait cette flèche sous accueil c’est parce que le menu est certainement le même pour toutes les pages, ou plutôt la page de base (index.html par exemple) a été dupliquée, et renommée pour chaque page.
        Ce qu’il faut c’est modifier aussi un petit truc dans la partie correspondant au menu de chaque page.
        Comme effectivement parfois une image vaut un long discours :
        onglet actif
        Il s’agit du menu, son code est (généralement) au début du « Body » puisqu’il est ce qui s’affiche le plus haut dans la page sur un écran.

        Je devine que la petite flèche est définie dans votre menu par une (balise « li » current_page_item), en d’autre termes, ça signifie pour le navigateur que c’est l’onglet qui correspond à la page affichée (accueil dans mon exemple).
        Ainsi, si j’affiche le script de ma page « Entreprises », le script du menu sera bien sûr identique à ceci près, la balise (<« li class= »current_page_item »>) aura été déplacée (par moi) dans le (li) de « entreprises », quand à mon onglet « Accueil », il devient une simple balise (li) :
        current 2
        C’est tout simple non ?
        De telle sorte que la page « Entreprises » qui s’affiche aura la petite flèche sous l’onglet « Entreprises ».
        Je ferais ensuite la même manip sur ma page « Evénements », puis sur chaque page reliée au menu ou à son sous-menu…

        Pour les M1 et M2, non, je n’interviens pas en Fac, je les reçois dans le cadre de mon job, je travaille avec le CNB [Conseil National du Barreau].
        Mais bref, revenons à nos moutons, pour votre problème de menu, c’est juste ça qui cloche, inutile d’aller tripatouiller le css, tout est dans le html 🙂 à ce même endroit 🙂

        J'aime

  3. Florian.D dit :

    Bonjour Steve !

    Merci encore pour cette astuce, je ne regardais en effet pas du bon côté, je n’aurais par conséquent pas trouvé dans le .CSS 🙂

    Une petite question : je souhaite mettre en place un formulaire de contact, afin que cela arrive directement sur une boite mail. En me basant sur des formulaires de contact trouvés par-ci par-là, je suis arrivé au résultat suivant :

    Prénom / Pseudo:

    Votre message:

    Tout est en forme tel que je le souhaiterais, seulement je n’arrive pas à faire fonctionner ce formulaire. Je trouve pas mal de choses comme quoi il faudrait créer un php mais je ne sais pas réellement de quoi il s’agît, et si je pouvais tout faire en html je ne dirais pas non !

    J’imagine que vous avez une idée qui pourra évidemment me sauver la mise ? 😉
    Je suis également preneur pour afficher un message type « Message envoyé » une fois que le mail est parti.
    En attendant, je vais continuer mes recherches, qui, avec un peu de chance, aboutiront à quelque chose.

    Merci d’avance !

    J'aime

    1. Steve dit :

      Bonjour Florient, en effet, dans ce cas, un formulaire en html (+ un peu de CSS pour le mettre en forme) sont de mise, mais aussi un php s’impose pour un formulaire, ce fichier php sert de « réceptacle » aux données envoyées.
      En effet, lorsque votre formulaire est rempli, le visiteur clique sur « envoyer », mais cet envoi doit bien être reçu pour traiter les données, il s’agit du script « php ». Il faut envisager la création d’une base de données.

      C’est ce script qui va vous permettre de recevoir des données lisibles et traitable pour vous les renvoyer en clair dans votre boite mail.
      Vous trouverez un tutoriel simple (quoi que) sur cette page (html, css et php).
      Mouai … Un peu trop balaise quand même ?
      Alors repensez Mailchimp, c’est vraiment le plus simple, le plus sécurisé aussi.
      Vous pourrez faire en quelques clics un formulaire de contact et une bonne Newsletter et un simple petit script à coller dans le body de votre page concernée vous affichera l’un et / ou l’autre.
      De plus vous serez notifié de chaque envoi !
      Et c’est gratuit, alors pourquoi s’embêter ???

      Sinon, si vous tenez à faire juste un formulaire html, je vous en ai fait un rapide à récupérer ici, mais ce n’est pas le top, sans php inutile de penser à un petit message supplémentaire.
      Ceci étant, le php n’est pas une horreur, c’est un petit script à installer à la racine du site et peut-être ce tuto (formulaire + php) sur open classroom (anciennement le site du zéro) est parfaitement adapté, j’ai commencé en suivant les tutos de Matéo21 !
      Bon courage !

      J'aime

  4. Florian.D dit :

    Merci encore pour vos réponses !

    L’idée d’utiliser MailChimp m’intéresse fortement ! Je l’ai déjà utilisé pour la Newsletter et c’est plutôt efficace !

    Si je comprends bien, le principe serait donc un formulaire similaire à celui d’une Newsletter, à l’exception que le « mail de contact » se retrouverait directement sur l’interface MailChimp (avec notification par Mail d’un nouveau message) ?
    Mais du coup, comment gérer le côté « liste » ?
    Car en réalité tout formulaire de contact rempli va générer une inscription à une liste, avec une demande de confirmation pour s’inscrire à la Newsletter.
    Comment détourner ce point ?

    Autrement, si je n’ai d’autres choix que de me lancer dans le php, hé bien je retrousserai mes manches pour me mettre dedans. En y jetant rapidement un coup d’oeil, les liens envoyés semblent très clair pour débuter.

    J'aime

    1. Steve dit :

      Pour le formulaire, en effet, MailChimp ne le fait peut-être pas … En fait un gratuit intéressant est EmailMeForm que j’ai longtemps utilisé car en plus d’être gratuit, il est très simple, vous dispense des scripts longs et des transferts de dossier via FTP et de modifier des liens par ci par là.
      Un formulaire de contact est largement représenté via EmF, quelques images :
      Une fois inscrit sur le site, vos différents formulaires s’affichent à l’écran (vous n’en n’aurez pas au départ … Ou peut-être un de démo je ne sais plus)

      Le formulaire sélectionné (ou en haut à droit (Add Form) sivous voulez en créer un, vous affiche la barre d’outils, c’est cette barre qui va servir aux différents paramètres :

      En cliquant sur « édit » je peux modifier mon formulaire :
      https://www.dropbox.com/s/jc9nla2qj4x2310/5.png?dl=0 »
      Lorsqu’il me convient (nous sommes sur l’onglet + add filed) je vais de suite faire les réglages dans l’onglet « form setting » pour quelques précisions :

      – Mon langage (French, pour respecter l’encodage des caractères (é,è,à,ê,ç ï …)
      – Redirect url : C’est là que je vais spécifier une page de renvoi qui redirigera le client vers une page de mon site ou ailleurs lorsqu’il aura validé. Cette page peut être une simple page de remerciement sur votre site :
      Enfin en retournant dans la barre d’outils, il faut finaliser les réglages, à savoir ou vont être envoyées les données collectées en cliquant sur l’outil « Notification » l’image parle d’elle-même :

      Dans Add recipient’email ajoutez l’adresse à laquelle vous recevrez les notifications d’utilisateurs avec les informations collectées. Dans Message Detail « From » laissez burst@ ou customisez, dans Subject, customisez et nommez-le afin de retrouver plus vite le mail reçu qui portera le même intitulé.

      Il ne reste plus qu’à intégrer ce formulaire sur votre page en retournant sur votre barre d’outil de page d’accueil, cliquez sur « Code » et enfin le bout du tunnel. Choisissez dans « Embed » ce qui vous convient le mieux, sachant que le premier collera le formulaire dans la page souhaitée, l’Iframe ouvrira une petite fenêtre pour le formulaire (déconseillé car ça vieilli mal, et certains navigateurs pourraient la bloquer) ou Full page, c’est comme précédemment, mais sur toute la fenêtre …

      C’est tout simple au bout du compte !!!

      J'aime

  5. Florian.D dit :

    Décidément, vous avez réponse à tout, chapeau !
    Je viens de créer mon formulaire et c’est parfaitement ce que j’attendais, et ça fonctionne, pour un travail en moins d’un quart d’heure !

    Je me permet de vous embêter encore (si je vous ennuie, n’hésitez surtout pas à le dire !) : je suis bloqué avec ma Navbar pour créer un Dropdown.
    En soit, le Dropdown n’est pas bien compliqué, néanmoins, je n’arrive pas à l’intégrer, sûrement du fait que la navbar est faite non pas avec des balises mais de la manière suivante :
    http://hpics.li/4896c1b

    C’est une navbar déjà présente dans le « template » de base, je paie le prix de ne pas avoir tout fait moi-même dès le début, les modifications ne sont pas toujours simples.
    Une idée de comment je pourrais faire ? J’imagine que je vais devoir reprendre intégralement la Navbar (à la fois html et css) ?

    Merci d’avance !

    J'aime

    1. Steve dit :

      Ce template est-il « responsive » ? si vous l’avez trouvé parmi les liens que je met dans l’article, la réponse est oui, sinon, L’avez-vous testé sur smartphone, ou tablette ?
      Je ne comprend pas en quoi vous ne pouvez l’intégrer, du fait qu’elle figurait dans le template, non ?
      Ou alors vous avez voulu changer le menu et supprimé une balise en trop ???
      Quel est le problème lors de l’intégration ? vous la mettez juste après le Header entre les balises au moins … 🙂
      C’est un menu déroulant à un (ou plusieurs) des onglets du menu principal que vous souhaitez ajouter ?
      Dans ce cas, avant de refermer la balise vous devez ajouter une nouvelle balise

      <

      ul> puis autant de que d’onglets à ce sous-menu de cet onglet ex :

      Menu 1

      Sous-menu 1a
      Sous-menu 1b

      Menu 2

      Sous-menu 2a
      Sous-menu 2b
      Sous-menu 2c
      Sous-menu 2d

      Menu 3

      Sous-menu 3a
      Sous-menu 3b
      Sous-menu 3c

      Ce menu sera dans cette configuration composé de 3 onglets, dont le premier aura 2 sous menus et deus sous-sous-menu. Les deux autres onglets auront des sous-menus mais pas de troisième niveau.
      C’est ça que vous cherchiez à faire ?

      J'aime

      1. Florian.D dit :

        Je suis parti d’un template « blog » responsive présent dans les exemples sur getbootstrap
        http://getbootstrap.com/examples/blog

        J’ai du mal m’exprimer je suppose ^^.
        En fait dans cette barre de navigation, je voulais créer un onglet qui soit un menu déroulant vertical (le luxe serait sans cliquer, juste en passant la souris, ça déroule).
        J’ai donc trouvé sur le même site comment on ajoute un « Dropdown ».

        Sauf qu’au final, quelque soit mes manip’, je n’arrive pas à obtenir ce menu déroulant : soit le menu est là mais la barre est totalement déformée, soit l’apparence est ok mais pas de menu, il agît comme un simple onglet.

        D’où ma question, vu que j’ai cherché sur internet et à chaque fois, je tombe sur des nav sous cette forme :

        Accueil
        Etape 1
        Etape 2
        Etape 3
        Contact

        Et que ce n’est pas le cas de la mienne. Mais elle fonctionne parfaitement et rempli tous mes critères, à l’exception de pouvoir ajouter un menu déroulant.

        J'aime

  6. Florian.D dit :

    Je me réponds (encore !) à moi même.

    J’ai bien réussi à intégrer un menu déroulant, néanmoins je n’arrive jamais à le faire proprement, il y a toujours quelque chose qui influe sur le restant de la barre de navigation… Et je rencontre des difficultés à modifier ce menu avec le css.

    Si jamais vous auriez l’envie/la motivation pour m’aider, vous pouvez trouver le code de l’index sur cette page :
    http://perials.com/creating-a-simple-responsive-wordpress-theme-from-scratch-using-twitter-bootstrap-part-2/
    A l’exception de détails, j’ai conservé la barre de navigation d’origine du template.

    Merci encore !

    J'aime

    1. Steve dit :

      Bonjour Florian,
      En fait le mieux serait de m’envoyer votre index html par mail, histoire que je vois ce qui bloque (si je peux trouver ce qui ne va pas Oo). couloirsdunet@gmail.com
      Sinon, un autre template bien plus moderne et dynamique que celui que vous envisagez peut être envisagé.
      Vous pouvez en trouver dexcellente qualité par exemple vous en trouverez 50 ici. Ils sont simple d’utilisation, d’installation et si vous y allez mollo sur les modifs des balises, tout devrait bien se passer …
      Ces templates si je dis modernes, ç’est d’un point de vue techno du web, mais ils sont toujours d’une simplicité visuelle et d’une efficacité de navigation optimisée pour le visiteur.
      De plus, je les trouve varient class et variés. Chacun vous propose des page avec colonne à gauche, ou colonne à droite, ou avec les trois colonnes plus un index (page d’accueil), parfois une page de contact.
      😉

      J'aime

      1. Steve dit :

        Bonjour à tous, petite modification concernant l’hébergement de votre site.
        A dater du 03 octobre 2016, Dropbox n’affichera plus les contenus html dans les navigateurs, autrement dit, si vous avez choisi cette option d’hébergement gratuit pour votre site, vous avez un mois pour faire autrement. N’hésitez pas à poser vos questions dans les messages.
        dropbox n'affiche plus le html

        J'aime

  7. Lebuster dit :

    Merci pour cet article, mais il n’y a pas une solution pour les utilisateurs de téléphone ?

    J'aime

    1. Steve dit :

      Bonjour Lebuster,
      Vous voulez dire de créer votre site directement avec votre téléphone ou créer un site POUR téléphones ?
      Dans le premier cas, je ne connais pas d’application, et ça me parrait un peu farfelu (générer du code html, de Css et autre js sur un écran de mobile (même large) doit rendre complètement épileptique 🙂
      Dans le second cas, et la méthode que j’utilise dans cet article est ainsi, votre site saura s’adapter automatiquement selon le support (génial non ?)
      Si vous n’avez pas de site « responsive », vous ne pourrez pas le rendre « mobile », il vous faudra le refaire !!!

      J'aime

      1. Lebuster dit :

        Merci d’avoir , et j’aimerai utilisé la méthode que vous utilisez, mais malheureusement je n’a pas de pc pour le moment je blog tous mes blogs avec une téléphone , mais dites moi que veut dire un sote reponsive? Un site au quel est adapté a tous les navogateurs?

        J'aime

      2. Steve dit :

        Bonjour,
        Oui c’est exactement ça, un site responsive s’adapte automatiquement au support.
        Ce blog par exemple est ainsi, que vous soyez sur un smartphone, une tablette, un pc ou un iMac 28′, il s’affichera de façon optimisée.
        C’est le miracle du html5 (et de JQuerry) 🙂
        Cependant pour faire un site, vous devrez manipuler (et modifier) plusieurs types de fichiers : html5 (pour le contenu général), Css (pour la structure et la cohérence, l’apparence) et du JS pour le comportement des actions du site.
        Lorsqu’on fait un site, on utilise un éditeur qui permet d’ouvrir plusieurs fichiers sur le bureau et de vérifier le comportement des modifs.
        Sur le bureau d’un ordi c’est érable, mais sur un smartphone, ça n’existe pas (éventuellement sur une tablette, et encore).
        Si pas d’ordi, vous ne pourrez pas faire un site !

        Aimé par 1 personne

      3. Lebuster dit :

        Ok merci de votre aimable donc au fur et à mesur je chercche un ordi et commence à faire.

        J'aime

      4. Lebuster dit :

        Merci Steve et je vais chercher un ordi pour commencé

        J'aime

Vous souhaitez réagir à cet article ? Ça tombe bien, vous pouvez le Faire ici !

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s