Créer un site internet gratuit en une heure Petit guide digital simple et facile pour créer un site web sur Wordpress ou Wix (eGuide Education t. 4) (French Edition) by Olivier Rebière Cristina Rebiè (z-lib.o - Copie
publicité
eGuide Education: Créer un site Internet gratuit en une heure Petit guide digital simple et facile pour créer un site web sur Wordpress ou Wix - Français, version 1 - © Cristina & Olivier Rebière - 2017. Tous droits réservés. Table des Matières Bienvenue! 1. Créer un site web en 1 heure sur Wordpress.com 2. Définir une charte graphique pour votre blog/site 3. Créer un site web en 1 heure sur Wix.com Remerciements Auteurs Bienvenue! Bonjour! N ous vous souhaitons la bienvenue dans la collection "eGuide Education" - une série de guides pratiques qui, nous l'espérons, vous aidera à implémenter facilement et à moindre coût notre expérience dans l'adaptation et l'implémentation de techniques de cohésion d'équipe pour le bon déroulement de votre classe et faire face aux besoins des apprenants en matière d'enseignement transversal par le projet et la collaboration. Ce numéro se propose de vous apprendre à créer un site web facilement, pas à pas, sur l'une des plate-formes gratuites d'hébergement de blogs: Wordpress.com ou Wix.com. Pourquoi un site web? Aujourd'hui, un site web est indispensable pour avoir de la visibilité, pour assurer la communication, mais peut être facilement utilisable comme outil dans le processus d'enseignement pour transmettre le savoir, mais aussi pour motiver les élèves ou les étudiants. Que ce soit en mathématiques, les sciences ou la lecture, les élèves ne sont visiblement plus capables d'obtenir les mêmes résultats, surtout en les comparant à ceux du Japon ou de la Corée du Sud par exemple. Cet aspect purement quantitatif mis à part, il existe une véritable souffrance, que ce soit dans le corps enseignant et, bien entendu, chez les apprenants. Les méthodes didactiques ne suivent souvent plus les progrès technologiques. Il faut implémenter des techniques nouvelles d'enseignement, une pédagogie collaborative et motivante. Vous pouvez vous poser la question: mais pourquoi aurait-on besoin d'un site web? Vous avez peut-être déjà la réponse, puisque c'est pour cela que vous avez acheté cet ebook, mais sinon voici quelques exemples d'utilisation de site web dans le monde de l'éducation et de la formation: un blog pour un voyage scolaire un site pour poster des petites vidéos tutorielles ou "capsules d'éducation" avec des questionnaires à l'attention des apprenants et des statistiques, l'analyse des résultats, etc. un blog pour un projet éuropéen, de partenariat stratégique ou de coopération internationale un silte pour une coopération entre plusieurs classes (travail collaboratif, etc.) Notre philosophie Nous n'avons pas débuté notre carrière professionnelle comme enseignants et pour ainsi dire nous sommes arrivés "sur le tard" dans le monde de l'éducation en France. Il a fallu en comprendre les codes, le vocabulaire, les "traditions", l'appareil administratif. Quoique, pour être entièrement dans la vérité, Cristina a eu l'occasion d'enseigner le français au Lycée Français Anna de Noailles de Bucarest en Roumanie qui fait partie de l'Éducation Nationale. Nous n'étions pas complètement étrangers à la transmission organisée et structurée de la connaissance, à l'évaluation des savoirs et des compétences, autrement dit, à la pédagogie et à l'enseignement. En effet, en tant que créateurs d'entreprises et employeurs nous avons dû mettre en place des actions de formation continue auprès de nos collaborateurs. Nous avons ainsi développé de nombreux modules courts et efficaces, adaptés aux nécessités du terrain et à la réactivité dont il faut faire constamment preuve dans le monde du business. Nous avons aussi animé de nombreuses sessions de coaching et de formations spécifiques en ressources humaines. Nous avons organisé et facilité des dizaines d'événements de team building (ou cohésion d'équipe en français), pour des groupes allant de 7 à 500 personnes, adultes et jeunes. Plus récemment, nous avons formé des professeurs du secondaire aux techniques des réseaux sociaux et aux outils numériques, à la gestion de projets complexes cofinancés, aidé des collégiens français à passer le premier diplôme de leur vie avec des méthodes un peu inédites pour eux. Toute cette expérience cumulée nous a permis d'aborder l'enseignement "classique" avec un regard différent. Pas meilleur, mais différent, car il faut aussi que l'enseignement réponde aux besoins des apprenants et des entreprises d'aujourd'hui. Ce n'est plus le cas visiblement si l'on constate le chômage très élevé chez les jeunes. Bien sûr, "l'éducation" en général n'est pas la seule fautive de cette crise économique mondiale et de l'inadéquation de la "main d’œuvre" aux "besoins", mais elle y a sa part. Quoi qu'il en soit, avec la globalisation, avec internet, la révolution de l'éducation est déjà en marche: e-learning, projets transversaux, disparition des matières, des notes, etc. Les exemples ne manquent pas et nous n'en sommes qu'au début! De même que la révolution industrielle s'est accompagnée d'une démocratisation massive de l'éducation et, il faut bien le dire, d'une standardisation assez poussée au détriment du bonheur des élèves, il faut accompagner la révolution digitale avec une nouvelle manière d'enseigner et de recevoir la connaissance: plus collaborative, plus créative, plus... épanouie. Vous le verrez, il est tout à fait possible d'accompagner la mutation de l'éducation de façon souple, agréable, et transformer l'expérience des apprenants, des enseignants, en quelque chose de bénéfique, positif, tout en préparant ainsi notre jeunesse aux défis de demain. Précisions techniques En fonction des capacités de votre liseuse, vous pourrez profiter de fonctionnalités de zoom sur les photos. En tout cas vous pourrez utiliser des liens hypertexte (ou hyperliens) soulignés tout au long de l'eGuide. Nous avons essayé de faire de notre mieux pour que votre expérience de lecture soit la plus agréable possible, en dépit des grands écarts de technologie entre les différents supports de lecture. Soyez assuré(e)s que dans les années qui suivent nous serons "à la page" pour vous proposer de nouvelles versions plus interactives au fur et à mesure que les formats et les liseuses se standardiseront! Bon, voilà, assez de parlote, place aux activités, alors on y va! Amicalement, Cristina & Olivier Rebière 1. Créer un site web en 1 heure sur Wordpress.com Dans cette section, nous allons voir, pas à pas, comment créer simplement votre site en une heure, sur Wordpress.com. Vous allez voir, c'est facile! Il faut imaginer un site web comme une sorte de magazine dynamique avec différentes rubriques comme les magazines en papier. Pour bien faire la différence entre un site et un blog, sachez qu’un site internet peut inclure un blog, mais pas l’inverse. Un blog est tout simplement un format d’affichage d’articles sur une page, de façon antichronologique: c’est-à-dire que l’article le plus récent apparaît en premier, tout en haut de la page. Je précise que le mot « Blog » vient de l’anglais « web log », c’est-à-dire « journal de bord du web ». Plusieurs solutions gratuites de création et d’hébergement de blog s’offrent à vous. Je vous recommande d’utiliser le leader mondial, le site wordpress.com. Attention, il ne faut pas le confondre avec wordpress.org qui est un site proposant des modules plus complexes pour un site hébergé à vos frais sur le serveur d'un hébergeur. Ici nous parlons bien de la solution gratuite proposée par wordpress.COM! Photo 1.1: Page d'accueil de wordpress.com (en français) Pour créer un blog, c'est très simple. Appuyez sur le bouton bleu "créer un site". Ensuite, il faut choisir le "thème" de votre blog. C'est en fait le design, la signature visuelle. Il vous faut choisir un modèle que vous pourrez petit à petit adapter à votre charte graphique que vous avez définie. Dans la section suivante, je vais vous donner quelques idées de base pour constituer une charte graphique. Photo 1.2: Choix des thèmes parmi plusieurs modèles présentés Ensuite il vous faut choisir le nom de votre blog. Ici il vous faut entrer un nom (un domaine) qui soit le plus court possible, sans espace et sans ponctuation. Au besoin Wordpress vous propose des alternatives si le nom que vous avez proposé ne convient pas. Photo 1.3: Choix du nom (le domaine) qui aura comme forme finale nomdomaine.wordpress.com Photo 1.4: Choisissez bien le PLAN GRATUIT, sur la gauche! Bravo, vous avancez! Maintenant il vous faut créer un compte Wordpress. C'est sous cette "identité" que vous administrerez votre nouveau blog sur Wordpress.com et peut-être d'autres blogs que vous créerez si vous découvrez que cette activité vous plaît :-) Photo 1.5: Création de votre compte Wordpress avec une adresse email, un nom d'utilisateur et un mot de passe Il est toujours utile de savoir comment créer un mot de passe puissant. Utilisez pour cela le site www.generateurdemotdepasse.com et prenez de préférence un mot avec 16 caractères alphanumériques. Prenez garde de le sauvegarder dans un endroit sûr, sous forme écrite. Photo 1.6: Générez un mot de passe puissant sur generateurdemotdepasse.com C'est un peu long, je vous l'accorde, mais une fois que vous aurez créé votre compte Wordpress, il ne sera plus nécessaire de refaire cette procédure. Et voilà, nous arrivons dans l'interface d'administration de votre nouveau blog. Félicitations! Commencez par vous familiariser avec les différents menus sur la gauche. Photo 1.7: Page d'accueil de l'interface d'administration de votre nouveau blog Commencez à visiter les différents paramètres et faites les choix qui vous semblent opportuns pour vous. Un des menus intéressants à renseigner est celui des "Personnes": vous pouvez inviter des auteurs, contributeurs et autres administrateurs pour vous aider à administrer votre blog. Photo 1.8: Vous pouvez ajouter des Personnes à votre blog pour vous aider à rédiger du contenu de qualité Les pages sont en quelque sorte le contenu "statique" de votre blog, là où les informations n'ont pas vocation à être actualisées souvent. Les internautes qui visitent votre blog y accèdent via une barre de menu horizontale ou verticale, selon le thème que vous aurez choisi. La première page que je vous conseille de créer est "à propos", celle où vous présentez votre projet ou la raison d'existence de votre blog. Il faut donc appuyer sur le bouton "Ajouter" à côté de "Pages". Photo 1.9: Création de la première page du blog, "à propos" L'interface de Wordpress est très conviviale et ressemble à un traitement de texte simplifié. Rajoutez les informations pertinentes sur votre projet, les participants, des photos et/ou des vidéos. Vous pourrez toujours y revenir et modifier un peu plus tard lorsque vous aurez pris confiance en vous :-) Photo 11.10: vous créez votre page petit à petit en y rajoutant du texte et des médias (photos, vidéos) Chaque photo doit être optimisée afin de ne pas trop charger votre site. Vous pouvez ensuite y rajouter des informations et des mots-clés pour aider votre blog et ses photos à être facilement indexés par les moteurs de recherche, comme Google. Wordpress vous permet d'héberger 3 Gigaoctets (3 Go) de photos gratuitement. C'est largement suffisant surtout si vous prenez garde de bien optimiser vos images! Vous trouverez une méthode simple dans l'ebook "Gestion des projets - Management des projets" que vous trouverez sur la plupart des plateformes digitales ou la formation vidéo sur Udemy à ce sujet (profitez d'un coupon de réduction ici). Photo 1.11: vous pouvez éditer individuellement les photos (optimisées à 700 pixels et 72 dpi de préférence) et y rajouter des informations pertinentes Ensuite, vous pouvez créer des "Articles". À la différence des pages, ils apparaîtront tous sur la page "Blog" de votre site web, dans le sens antichronologique, c'est à dire le plus récent en haut, le plus ancien tout à fait en bas. C'est le principe du flux d'information dont se sont inspirés tous les réseaux sociaux. Photo 1.12: Création du premier article, "Bienvenue sur ce blog", en cliquant sur le bouton "Ajouter" à droite de "Articles" Les articles sont un peu plus complexes que les pages. Il faut y renseigner différents paramètres, comme la catégorie de l'article: c'est un peu ce qui correspond à la rubrique d'un magazine papier ou au chapitre d'un livre. Petit à petit, vous écrirez des articles qui feront référence à tel ou tel domaine, et vous les classerez donc dans une catégorie. Il vous faut aussi renseigner des mots-clés (ou "tags", ou encore "étiquettes") pour permettre aux moteurs de recherche d'indexer correctement votre article. Attention: il faut utiliser des mots qui se retrouvent effectivement dans votre texte où qui y sont reliés! Vos pages et vos articles devraient être optimisés SEO si vous voulez être pris en compte par les moteurs de recherche. J'écrirai un petit guide à ce sujet bientôt. Photo 1.13: Renseignez correctement les différents champs d'information de l'article que vous rédigez Il est aussi possible de suivre les statistiques de fréquentation de votre blog. Photo 1.14: Apprenez à visualiser les statistiques pour suivre vos indicateurs S.M.A.R.T... Photo 1.15: ...pour apprendre par exemple d'où viennent vos visiteurs et les pages ou articles de votre blog qu'ils apprécient. Pour pouvoir plus facilement propager le contenu de votre blog sur les réseaux sociaux, paramétrez la section "Partage" ou "Share". Là vous allez pouvoir facilement "relier" votre blog à une page de chaque réseau social comme vous le voyez dans la photo ci-dessous. Photo 1.16: Wordpress vous permet de propager facilement les articles de blog sur les réseaux sociaux. Appuyez sur les boutons bleus "CONNECTER" Vous pouvez aussi ajouter des menus et sous-menus dans la barre des menus. Pour cela, il faut d'abord créer les pages de ces menus (comme présenté auparavant). Le titre de la page que vous voulez introduire dans la barre des menus doit être assez court pour ne pas risquer "d'étaler" votre menu sur plusieurs lignes. Après la création de votre page, vous devez configurer la barre des menus. Pour cela, allez dans la colonne de gauche et posez votre souris sur le menu "Apparence" puis appuyez sur "Menus" comme dans la capture d'écran suivante. Photo 1.17: Pour créer un menu Puis, allez dans l'onglet "Recherche" au niveau de la flèche verte de l'image suivante et tapez le nom de la page que vous venez de créer et que vous voulez inclure dans la barre de Menus. Photo 1.18: Pour créer un menu recherchez la page Disons que c'est la page "eGuide Nature collection" que vous voulez ajouter. Cochez-la, puis appuyez sur le bouton "Ajouter au menu" juste en dessous, au niveau de la flèche dans la capture d'écran suivante. Photo 1.19: Ajoutez la page au Menu La page va alors se retrouver dans la partie "Structure du menu", sur la droite, tout en bas, comme dans l'image suivante. Pour pouvoir la paramétrer, appuyez sur la petite flèche déroulante au niveau de la flèche verte. Photo 1.20: Configurer le nouveau menu Vous pouvez ensuite modifier le titre de navigation en le raccourcissant. J'efface donc "collection", puis en plaçant la souris sur la boite, le curseur se transforme en une icône à 4 flèches. En maintenant appuyé le bouton gauche de la souris, je peux alors glisser-déplacer le menu et le placer plus haut, dans l'ordre que vous souhaitez. Si c'est le dernier menu, il n'est pas nécessaire de le bouger. Photo 1.21: Configurer le nouveau menu Vous devez ensuite appuyer sur le bouton "Enregistrer le menu" se trouvant en bas à droite, au niveau de la flèche sur la capture d'écran suivante. Photo 1.22: Enregistrer le nouveau menu Comme vous pouvez le constater sur l'image suivante, en affichant la page de mon blog, le menu "eGuide Nature" apparaît à l'endroit voulu dans la barre de menus. Photo 1.23: Le nouveau menu apparait bien dans la barre de menus Eh voilà! Vous savez maintenant comment configurer votre menu. Pour la création d'un sous-menu, vous procédez de la même manière. La seule chose qui change c'est que vous devez le placer sous le menu souhaité, en le décalant d'un cran vers la droite (indentation). De cette manière, il deviendra un sous-menu. Vous pouvez le voir dans la capture suivante au niveau de la flèche, pour les sous-menus du menu "Destination". Photo 1.24: Les sous-menus Et voici ce que les internautes verront sur votre blog: Photo 1.25: Menu avec des sous-menus Vous avez maintenant une vue d'ensemble de ce que Wordpress.com vous permet de faire gratuitement pour faire connaître votre projet et propulser du contenu multimédia sur internet et sur vos réseaux sociaux! Vous pourrez approfondir cet aspect si vous le souhaitez en consultant notre formation vidéo sur le sujet. Toutefois, il faut savoir qu'un blog peut vous être très utile aussi pour faire des classes inversées, transmettre des capsules éducatives à vos élèves, des questionnaires et des évaluations, récolter les résultats, faire des statistiques, etc. Un site peut devenir facilement un vrai outil collaboratif, de transmission des savoirs et compétences et d'évaluation de vos apprenants! Dans la section suivante, nous allons voir l'utilité d'une charte graphique pour un site/blog (notamment dans le cas d'un projet). Puis nous allons voir comment réaliser un site gratuit sur la plateforme Wix, pas à pas. 2. Définir une charte graphique pour votre blog/site Si vous avez besoin de créer un blog ou un site pour un projet, pour pouvoir communiquer et disséminer votre projet, il est utile de créer une identité facilement reconnaissable par les parties prenantes au projet ainsi que par les cofinanceurs et le public cible. Vous avez donc besoin de définir dès le début du projet une charte graphique. Définition de la charte graphique Nous allons commencer d’abord par la définition de la charte graphique. Certains d’entre vous la connaissent peut-être déjà. La charte graphique est en fait l'ensemble des signes graphiques qui constituent l'identité graphique d'une organisation, ou dans notre cas, d'un projet. Le but de cette charte est de conserver une cohérence graphique dans les réalisations ou les productions d'une même projet. Vous pouvez vous poser la question: pourquoi auriez-vous besoin d’une charte graphique? La réponse n’est pas compliquée: pour vous démarquer des autres projets tout d’abord. Pour assurer la cohérence graphique, mais aussi pour obtenir plus facilement des financements: un beau projet bien présenté a bien plus de chances d’obtenir des cofinancements qu’un projet terne, sans aucune identité visuelle. Il faut savoir que les financeurs que vous démarcherez, peu importe qu’il s’agisse d’acteurs locaux, nationaux, européens ou internationaux, sont assaillis par des porteurs de projet comme vous qui demandent, tout comme vous, des subventions ou des cofinancements. Ce qui fera la différence est certes le contenu du projet, mais avant que l’évaluateur arrive au fond, il est impacté par la forme. Si une charte graphique est mise en place dès le montage du projet, cela appuiera la cohérence et le sérieux de votre projet. Beaucoup de porteurs négligent cet aspect, c’est pourquoi, si vous faites un effort à ce niveau, il ne vous sera pas si difficile de "sortir du lot". Comme vous l’aurez compris, la charte graphique mettra en valeur votre projet en augmentant ses chances d’obtenir des cofinancements. Elle vous permettra aussi de prouver votre professionnalisme aussi bien aux parties prenantes du projet, qu’aux acteurs extérieurs. La charte graphique joue donc un rôle essentiel dans la communication interne et externe du projet. Éléments constitutifs d’une charte Ne vous imaginez pas que vous devez être un artiste ou un spécialiste en design pour définir une charte graphique pour votre projet. N’importe qui peut le faire. Vous devez définir les éléments qui vont rendre votre projet reconnaissable. Les couleurs Commencez par choisir les couleurs - une ou deux et de préférence en liaison avec la thématique de votre projet (exemple – pour un projet sur l’environnement, une des couleurs sera le vert ; si la thématique est l’eau ou le voyage, le bleu est un bon choix, etc.). Attention aux choix des tons: ils ne doivent pas trop solliciter les yeux, ni les fatiguer. Il faut s’imaginer que ces couleurs vont se retrouver comme arrière plan sur tous vos documents de communication interne ou externe, voire même sur votre site Internet. Les tons pastels sont à privilégier. Il faut faire attention à la complémentarité des couleurs: je vous recommande un site très utile pour choisir des couleurs qui se marient bien – http://www.paletton.com/ ! Sur ce site vous pouvez choisir une couleur et ensuite voir avec quelle autre couleur elle se marie le mieux ou alors avec quelles autres paires de couleurs. L’harmonie des couleurs est importante non seulement pour ne pas déranger l’œil, mais pour l’attirer aussi ;-). Le logo Ensuite vous pouvez choisir un logo – si vous ne trouvez pas au sein de votre projet une personne douée en création et en logiciel d’image, vous pouvez prendre et utiliser une image publique, libre de droits liée à votre thématique également – un globe terrestre, un stylo, un arbre, une fleur, un ou plusieurs objetts, etc. Consultez par exemple ce site avec des images gratuites. Vous savez tous ce que c’est un logo: une composition figurée servant à identifier visuellement, de façon immédiate une entreprise, une marque, un produit, un service. Eh bien, dans notre cas il doit représenter votre projet. Choisissez d’abord la forme de votre logo – il y a quelques « codes » concernant le message transmis par la forme: Une forme ronde véhicule une image de sécurité et de bien-être et provient de l’image de la Terre Une forme carrée fera penser à la stabilité et la robustesse Une forme triangulaire fera penser à l’innovation et la technologie Une fois que vous avez choisi la forme, en fonction du message que vous souhaitez que votre projet véhicule, vous pouvez commencer à créer votre logo. Vous pouvez le faire sur Powerpoint si vous ne maitrisiez pas un logiciel comme Adobe Photoshop. Insérez donc la forme choisie et ensuite ajoutez un ou plusieurs éléments qui rappellent les messages forts de votre projet à l’intérieur (terre, stylo, ordinateur ou smartphone si liaison avec le numérique, etc.). Vous pouvez rajouter le nom de votre projet ou son acronyme. Les caractères Un autre élément constitutif important est la police de caractère employée. C'est un aspect assez négligé par les porteurs de projet, même s'il fait partie de l’identité visuelle. Il faut choisir une police que vous utiliserez par la suite pour tous vos documents concernant le projet. Un critère déterminant dans le choix de la police est sa lisibilité. Choisissez une police qu’on peut lire facilement. Personne n’aime passer du temps à déchiffrer un document… Ne faites pas trop de mélange de polices: je vous conseille de ne pas utiliser plus de deux polices puisque cela peut devenir fatigant pour celui qui lit les documents concernant votre projet. Le choix de votre police peut véhiculer aussi un message: s’il s’agit d’un projet innovant, se basant sur les nouvelles technologies, choisissez une police moderne avec des formes plutôt rectangulaires. Si votre projet parle de tradition, d’artisanat, alors il vaut mieux choisir une police cursive, rappelant l’écriture à la main. Une police avec des fioritures ira bien pour un projet qui plonge dans l’histoire, mais attention à sa lisibilité! La lisibilité de votre police est plus importante que le message. Pour finir, il y a d’autres éléments graphiques que vous pouvez utiliser sur vos documents, réalisations, rapports, site, etc. comme les drapeaux des pays impliqués, les logos des partenaires, des cofinanceurs, etc. Une fois que vous avez choisi les couleurs, que vous avez conçu un logo et défini la police que vous allez utiliser comme charte graphique, commencez par faire un arrière plan en Powerpoint par exemple. Exportez-le ensuite en tant qu’image – jpg. Comme vous pouvez le voir dans l'image ci-dessous: il s’agit d’un projet franco-américain. Photo 2.1: Exemple de charte graphique Les logos des parties prenantes sont sur la barre horizontale du bas. En haut on retrouve le nom du projet avec la police choisie, encadrée par les symboles des deux territoires concernés : la Louisiane et la Martinique. Dans l’exemple ci-dessous, une charte émanant du même service académique, la DAREIC, concernant la mobilité à l’étranger: Photo 2.2: Exemple de charte graphique L ’élément graphique véhiculant l’idée principale du projet est bien entendu l’avion. En haut on retrouve les drapeaux des pays de la Caraïbe qui sont concernés par le projet et en bas les logos des parties prenantes. Utilisation de la charte graphique Une fois votre image au format .jpg créée et définie comme arrière plan, insérez-la dans vos documents de type Word. Vous pouvez l’utiliser pour: la correspondance, les rapports, les bilans, les demandes de cofinancements, etc. les feuilles de calcul, utilisez seulement le logo et les couleurs de la charte dans les en-têtes des tableaux par exemple vos powerpoints - les projets sont souvent l’occasion de faire des présentations, alors votre charte vous sera très utile le blog du projet – il faut retrouver tous les éléments de votre charte graphique pour assurer l’identité visuelle de votre projet les objets promotionnels que vous pouvez créer pour financer le projet : t-shirts, stylos, etc. 3. Créer un site web en 1 heure sur Wix.com Alternativement à la solution proposée dans la section consacrée à Wordpress.com, vous pouvez décider de créer un site web gratuitement sur le site wix.com Le gros avantage de Wix, c'est qu'il est plus simple et plus intuitif que Wordpress, sans offrir cependant les différentes extensions (ou "plug-in") qui permettent de personnaliser l'expérience de l'utilisateur et vos besoins. Les sites sur wix sont très rapides à l'affichage et très... beaux. Vous obtiendrez d'excellents résultats avec wix, c'est pourquoi je vous explique ci-dessous comment faire les étapes de base, simplement. Au fur et à mesure que vous prendrez confiance avec l'interface de wix, vous personnaliserez votre site et le rendrez tout à fait unique! 1. Accéder à Wix.com en français La première étape consiste à accéder à la version française de wix.com. Vous pouvez accéder ici directement au site en français ou alors simplement choisir la langue de Molière en cliquant sur le symbole de la planète en haut à droite sur le site en anglais (voir la flèche verte sur la capture d'écran cidessous). Photo 3.1: Page d'accueil de wix.com (en anglais) et choix du français comme langue pour votre futur site web 2. Commencer ou créer un compte OK. Maintenant cliquez au choix sur "Commencez" ou "Se Connecter" car il vous faut créer un compte d'administrateur afin de pouvoir créer et ensuite actualiser votre blog. Photo 3.2: Choisir "Commencer" ou "Se Connecter" À présent, vous pouvez choisir de créer un compte avec des identifiants personnalisés sur le panneau de gauche, ou avec vos identifiants Facebook ou Google sur le panneau de droite. Si vous optez pour créer des identifiants personnalisés, je vous conseille d'utiliser un mot de passe créé avec le site generateurdemotdepasse.com avec 16 caractères alphanumériques. Prenez soin de bien noter en lieu sûr ce mot de passe, de préférence sur du vrai papier, on ne sait jamais. Pour ma part, j'ai choisi de continuer avec l'un des célèbres réseaux sociaux. Photo 3.3: Se connecter sur wix.com avec des identifiants personnalisés (à gauche) ou déjà existants comme Facebook ou Google 3. Choisir le type de site internet et le prévisualiser Super. Maintenant il vous faut choisir le type de site qui vous intéresse. Il y a un large éventail comme vous pouvez le constater! Dans notre exemple, nous allons opter pour Blog. Vous êtes libre par la suite de choisir n'importe quel autre type de site. Photo 3.4: Choisir le type de votre nouveau site web Wix nous présente différents "templates", c'est-à-dire un modèle de site qui nous plaise et soit conforme à nos objectifs et si possible, à notre charte graphique. Photo 3.5: Choisir un modèle de site parmi les "templates" proposés Je vous conseille de taper le mot "éducation" (qui est le même en anglais) en haut à gauche dans la petite boîte pour rechercher parmi les templates ou modèles de sites proposés. Vous pouvez tout aussi bien taper un autre mot clé pour le domaine qui vous intéresse. Wix affiche très vite plusieurs possibilités de choix sur plusieurs pages. Vous avez vraiment l'embarras du choix! Photo 3.6: Chercher les modèles basés sur le mot "éducation" Dans cet exemple, nous allons opter tout simplement pour le premier modèle présenté et qui s'appelle "Classe de nature". Si vous survolez avec votre souris le modèle en question, vous voyez un aperçu sur un smartphone et deux boutons bleus qui s'affichent: "Modifier" et "Voir". Photo 3.7: Survoler avec la souris et choisir "Modifier" ou "Voir" Ici j'appuie sur "Voir" et une prévisualisation du site s'affiche dans un nouvel onglet. Par défaut, c'est l'affichage sur un écran d'ordinateur qui s'affiche (flèche rouge). Photo 3.8: Aperçu du futur site sur un écran d'ordinateur Essayons l'aperçu "smartphone". Il suffit pour cela, vous l'aurez deviné, de cliquer sur l'icône juste à côté sur la droite... Photo 3.9: Aperçu du futur site sur un écran de smartphone 4. Modifier le site choisi Très bien. Essayons maintenant de personnaliser notre site. Appuyons sur le bouton bleu "Modifier ce site". Une petite animation cinématique se déclenche pendant que l'interface de modification se charge dans un nouvel onglet de votre navigateur. Photo 3.10: Écran d'accueil de la modification (personnalisation) du site Vous voyez apparaître le site avec une sorte de "calque" par-dessus le site avec différentes boîtes qui vous permettent de le personnaliser et de le transformer, petit à petit, en votre site. Par exemple la flèche rouge pointe sur le menu "Arrière-plan". Cliquons sur ce bouton et voyons ce qui se passe: Photo 3.11: Accès à la personnalisation de l'arrière-plan Eh bien c'est super cool: vous pouvez choisir des photos pré-existantes sur wix.com ou téléverser votre propre photo ou même votre propre vidéo qui s'affichera en arrière-plan! Vous pouvez tout aussi bien choisir une palette de couleurs en cliquant sur le fond de couleur derrière la photo d'arrière-plan. Photo 3.12: Choix de la palette de couleurs 5. Sauvegarder le site et votre travail Vous pouvez jouer un peu avec la foule d'options disponible à l'écran, mais je vous conseille de sauvegarder très vite votre travail pour pouvoir le retrouver et ne pas perdre vos dernières modifications. Pour cela, accédez au menu Site / Sauvegarder. Photo 3.13: Sauvegarder le site C'est une phase très importante de la création de votre site. Il vous faut le "baptiser" et lui donner un nom en fonction de votre nom d'utilisateur (sous-domaine du domaine "wix.com"). Je vais choisir de taper "test" dans cet exemple... Photo 3.14: Choisir son nom de site sur wix.com ... puis je clique sur le bouton bleu "Sauvegardez et continuez". Photo 3.15: Faut-il publier son nouveau site? Au bout des quelques secondes que dure la sauvegarde, un nouvel écran apparaît. Une fenêtre avec une invite vous demande si vous voulez publier votre site. En effet, pour l'instant votre projet de site n'est pas encore accessible sur internet: ce n'est qu'une ébauche. La question se poste effectivement de savoir si vous vous sentez prêt/e à le "lancer" et à l'offrir au public. Si vous ne savez pas que décider, regardez quelques éléments de réponse dans mon conseil ci-dessous. Mon CONSEIL sur la publication de votre nouveau site... Pour bien comprendre, faisons une analogie géographique. Un projet de site internet, sur Wordpress comme sur Wix, doit être considéré un peu comme un petit village qui vient d'être fondé dans une contrée éloignée. Les maisons principales sont là, il y a quelques colons qui prennent possession des lieux. Des règles de vie s'établissent et les gens vivent un peu en autarcie. Mais il y a encore à construire avant que d'autres personnes ne puissent y venir et y passer un peu de temps. Comme ce petit village vient d'être fondé, on lui donne un nom, mais aucun panneau de circulation, aucune route ne pointe vers ce village. En outre, il ne figure sur aucune carte géographique! Alors même qu'il existe, personne ne sait comment l'atteindre, encore moins comment y arriver ou le visiter. Eh bien vous avez compris, en publiant votre projet de site internet, c'est un peu comme si vous fondiez ce village hypothétique. Il existe, mais personne ne sait qu'il existe puisqu'on ne sait pas comment y arriver et qu'il n'est représenté sur aucune "carte internet". Il est clair que certains robots vont trouver votre site, certaines personnes auxquelles vous confierez l'URL de votre nouveau site (c'est-à-dire son adresse). Il est encore "en construction" mais très "discret" puisque vous n'en parlerez pas beaucoup sur internet avant qu'il soit complètement finalisé. Néamoins le rendre public vous permettra de le tester en conditions réelles et de vérifier si tout fonctionne. Je pense personnellement qu'il n'est pas dommageable de le publier tout de suite. Plus tôt vous détecterez les éventuelles anomalies qui ne peuvent pas se voir tant qu'il reste "privé" et au stade de projet, mieux ce sera pour l'objectif que vous servez avec ce site. Si vous ne souhaitez pas publier tout de suite, vous pourrez toujours le faire plus tard! Pour les besoins du présent ouvrage, j'appuie sur le lien "Publier". Photo 3.16: Publication du site!! Et voilà! Félicitations, vous venez de publier un site: CHAMPAGNE! Vérifions tout de même en cliquant sur le bouton bleu "Voir le site". Un nouvel onglet s'affiche dans votre navigateur... Photo 3.17: Le site est vraiment public avec son URL dans la barre d'adresse du navigateur (flèche rouge) Magique! Tout fonctionne. C'est pas beau ça? 6. Modifier / Créer de nouvelles pages Comme nous l'avons vu dans la section consacrée à Wordpress, vous pouvez créer des pages pour afficher les informations permanentes de votre site. Les "posts" ou billets/articles sont eux consacrés aux nouvelles quotidiennes et alimenteront le "blog" dans un ordre anti-chronologique. Photo 3.18: Modification des pages existantes avec le bouton correspondant Sur la moitié gauche de la photo, on clique sur le bouton "Pages: HOME". La moitié droite de la photo montre un menu déroulant qui se déroule immédiatement vers le bas, présentant les pages pré-existantes dans ce template ou modèle de site. Modifions par exemple la page "ABOUT US" en cliquant dessus. Photo 3.19: Édition du contenu de la page La page apparaît. Vous pouvez modifier le contenu de la page (texte, image) en éditant directement les "boîtes" contenues dans la page. Vous pouvez ajouter des contenus différents en appuyant sur la grande icône "+" sur la gauche. Photo 3.20: Ajout de contenus différents à l'intérieur de la page Une foule de contenus personnalisables apparaît. Il vous faut les choisir puis les paramétrer. On peut citer par exemple: Texte Image Galerie Diaporama Bouton Bande Forme Vidéo Masque etc. Photo 3.21: Modification des paramètres d'une image préalablement sélectionnée Chaque objet de contenu peut être modifié, comme par exemple cette image sélectionnée d'un clic de souris. Il suffit de choisir les options et de "jouer", tester, jusqu'à obtenir l'effet escompté. 7. Modifier / Créer le menu La création / modification des pages peut être un travail long et fastidieux. Wix le rend agréable et très intuitif: tout est basé sur le glisser-déplacer avec la souris. Alors que vous travaillez sur les pages, vous pouvez en profiter pour modifier / créer le menu. Il est important en effet de bien penser la structure navigationnelle de votre site, c'est-à-dire la structure des pages "parentes" et des pages "filles". Photo 3.22: Édition du menu Sur la capture d'écran ci-dessus, on voit comment je "saisis" (avec un clic gauche de ma souris) la page "STUDENT LIFE" matérialisée dans le panneau "Pages" par un large bouton bleu clair. Le bouton gauche de ma souris maintenu enfoncé, je fais un glisser-déplacer pour ensuite "lâcher" la page où je veux qu'elle soit au final (je relâche le bouton gauche de ma souris. Autrement dit, au fur et à mesure que vous modifiez les pages, leur donnez un nouveau nom ou les supprimez, vous pouvez immédiatement actualiser votre menu. C'est très facile! 8. Activer la fonction "blog" sur votre site Une fois la création des pages de votre site réalisée, vous pouvez passer à l'écriture proprement dite de vos premiers billets qui alimenteront le blog. C'est une fonction optionnelle car vous pouvez décider de n'avoir qu'un site purement informatif, sans pour autant "bloguer". Admettons ici que vous voulez écrire des billets. Il faut donc avoir un "blog" qui est une page spéciale puisqu'elle s'actualise automatiquement à chaque fois que vous écrirez un "post". Afin d'activer le blog, accédez au bouton vert avec une bulle et un grand "B" blanc (comme "Blog") sur la gauche. Regardez la flèche orange sur l'image ci-dessous. Vous allez activer la fonction Blog sur votre site. Cliquez sur cette bulle verte. Photo 3.23: Bouton vert "Commencez à rédiger" Photo 3.24: Ajouter la fonction "Blog" sur votre nouveau site Photo 3.25: Au bout de quelques secondes, le blog est activé. Vous pouvez commencer à communiquer et partager. Cool! Photo 3.25bis: Sélectionnez "Définir" pour que la page blog devienne la page d'accueil de votre site 9. Créer et écrire un "post" ou un billet Vous pouver cliquer sur "Ajouter un nouveau post" comme figuré par la flèche orange dans la capture d'écran ci-dessus. Photo 3.26: Un modèle de "post" (article ou billet) s'affiche Un petit film en bas de l'écran vous guide pas-à-pas pour vous montrer comment faire. C'est pratique! Vous pouvez donc entrer votre titre, le texte, et ajouter des contenus différents en les sélectionnant dans la barre du haut (image, galerie, vidéo, GIF, séparateur, HTML si vous savez écrire du code). Photo 3.27: Saisissez votre texte... Pour publier le post et ainsi alimenter la page "blog" de votre site, cliquez sur le bouton bleu "Publier post". Photo 3.28: Vous pouvez alors le partager sur les réseaux sociaux! Et voilà, le premier post! Photo 3.29: Le premier post est publié! Félicitations, vous maîtrisez maintenant les compétences de base pour gérer et développer votre site sur wix.com. Amusez-vous bien tout en apprenant! Remerciements N ous tenons à remercier tous les participants à nos événements de team building, apprenants, professeurs et collègues qui nous ont aidé à réaliser ces projets. Merci aussi à toutes les âmes charitables qui offrent sur internet des outils et ressources libres d'utilisation pour celles et ceux qui veulent toujours apprendre et s'améliorer! Auteurs Cristina & Olivier Rebière se sont connus à l'âge de dix-sept ans en 1990 en Roumanie, peu de temps après la chute du mur de Berlin et la Révolution roumaine de décembre 1989. Après deux ans de correspondance et quelques rencontres, Cristina réussit à obtenir une bourse d'études en France et Olivier l'épouse en 1993. Depuis, ces deux aventuriers de la vie ont eu une existence pleine de rebondissements, au cours de laquelle ils ont pris le goût pour l'enseignement, l'entrepreunariat, les voyages et l'écriture. Leurs livres sont utiles, pratiques, et vous aident à faire le plein d'énergie et de créativité. En complément de ce livre, découvrez tous les ouvrages de Cristina & Olivier! Création et conception des livres numériques Cristina est la "rédactrice en chef" des différentes collections: c'est elle qui décide des thèmes, des sites, rédige les textes, réalise et sélectionne les photographies, décide de la structure navigationnelle. Olivier est le "directeur technique": c'est lui qui élabore la "mécanique" de votre livre ou eGuide numérique. Il écrit certains livres, assure la relecture et l'édition électronique dans les différents formats. Pour en savoir plus... Vous voulez nous contacter ou connaître les dernières nouvelles? Chercher d'autres livres ou eGuides? Nous faire part de vos remarques pour améliorer la qualité des futures éditions? Alors connectez-vous à notre blog en français: blog-travel.voyage ou rejoignez-nous sur notre page Facebook! ou abonnez-vous à la chaîne #YouTube de Cristina Rebiere ici pour voyager avec nous ;-) ou faites mieux encore et abonnez-vous à l'UTILettre (newsletter): vous pourrez ainsi recevoir dans votre boîte email toutes les nouveautés et offres exclusives. Si vous avez apprécié notre travail, n'oubliez pas de mettre un commentaire sur nos livres ;-) Merci à vous! Cristina & Olivier "eGuide Education" (Français & English) Des guides pratiques et utiles pour les enseignants et formateurs. Découvrez la collection "eGuide Voyage" (en Français) Nos récits de voyage, des photos, des infos pratiques. Un supplément vitaminé aux guides touristiques classiques. Préparez et vivez vos vacances... autrement! ...découvrez TOUTE LA COLLECTION Discover the "Travel eGuide" collection (in English) Our travel experiences, photos, practical info. A vitaminized supplement to classic tourist guides. Prepare and live your holidays… differently! ...discover ALL THE COLLECTION Descubra nuestras otras "eGuías Viaje"" (Español) ...discover ALL THE COLLECTION Collection "eGuide Nature" (Français & English & Español & Português & Deutsch) Collection "eGuide Kids" (Français & English) Collection "Outils pour auteurs" (Français & English) Des guides pratiques pour les auteurs et formateurs francophones! Rejoignez la communauté des "Formateurs et Auteurs Numériques En Ligne #FANEL sur Google+" Collection "Team Building inside" (Français & English & Español & Português & Deutsch) Nous avons plus d’une décennie d’expérience dans l’organisation et la facilitation de dizaines d’événements de team building impliquant des centaines de participants pour des groupes allant de 7 à 500 personnes, adultes et jeunes. Nous souhaitons partager avec vous nos connaissances utiles et nos astuces de pros pour vous aider à faire progresser votre équipe à moindre coût. Vous allez découvrir des activités qui vont stimuler les participants et les inciter à révéler leurs qualités et le plaisir de travailler ensemble. Créez et vivez l'esprit d'équipe! Collection "101 idées utiles pour..." (Français & English) Collection "Les chemins vers soi-même" (Français & English) Autres livres Collection "Cathy Merlin", par Cristina Rebière À douze ans, Cathy Merlin découvre le Brésil où son père diplomate vient d’être nommé. Une rencontre inattendue au cœur de la jungle lui fera découvrir des secrets millénaires lors de fantastiques aventures. Romans La Poursuite - une histoire haletante, entre sentiments, émotions, amour, amitié et humour. Plongez dans la vie sous le communisme, tout en restant dans un présent plein de rebondissements. Formations vidéo sur internet Retrouvez les formations vidéo en ligne de Cristina sur Udemy Les formations internet en vidéo d'Olivier sur Udemy © Cristina & Olivier Rebière, 2014-2017 Tous droits de reproduction, de traduction et d’adaptation réservés. Aucun extrait de ce livre ne peut être reproduit ou transmis, sous aucune forme, ni sur papier ni par moyen électronique, sans une autorisation préalable de l’auteur. Toute reproduction, par quelque procédé que ce soit, constituerait une contrefaçon et serait passible des sanctions prévues par les textes de lois et traités internationaux en vigueur sur la propriété intellectuelle et la protection des droits d’auteur. STOP!!! Attendez une petite minute! Vous voudriez peut-être connaître nos trucs pour réduire vos dépenses, Voyager LIBREMENT et plus souvent? Nous avons DEUX solutions complètement GRATUITES pour vous! Vous pouvez accéder sans engagement à l'une et/ou à l'autre, comme vous le voulez... Première solution gratuite Si vous préférez LIRE, téléchargez facilement VOTRE livre électronique gratuit au format PDF "Voyager LIBREMENT sans se ruiner". Vous y trouverez nos "Astuces Voyage" pour: - comprendre que Voyager peut changer votre vie Deuxième solution gratuite Si vous préférez REGARDER et ÉCOUTER une formation vidéo, accédez facilement à VOTRE formation gratuite sur le site de notre partenaire Udemy. - utiliser des techniques pour réaliser vos rêves de Voyage, car c'est plus facile et moins cher que vous le croyez - continuer à Voyager, à découvrir les Autres et vous-même. Amicalement, Cristina & Olivier Visionnez des vidéos ou écoutez les podcasts à votre rythme... Table of Contents Page de Titre Table des Matières Bienvenue! 1. Créer un site web en 1 heure sur Wordpress.com 2. Définir une charte graphique pour votre blog/site 3. Créer un site web en 1 heure sur Wix.com Remerciements Auteurs 2 3 4 8 22 28 45 46
