atelier numérique créer son site wix

CRÉER SON SITE WEB AVEC WIX

10 et 17 décembre 2015

Bonjour !Nous serons vos animatrices aujourd’hui,

Et vous ?

PLAN DES 2 JOURNÉES• Faire le point sur vos “devoirs”• Découvrir l’environnement Wix• Adapter le design de vos sites

• Optimiser le contenu de votre site internet• Diffusion de votre site• Mise en ligne du site

Vos devoirs ?

1. Terminer le travail de votre arborescence 2. Ouvrir un site sous Wix : http://fr.wix.com/3. Choisir un template : http://fr.wix.com/website/templates4. Réfléchir à l’organisation type de vos pages 5. Réfléchir aux informations que vous voulez mettre en haut de

page (header) et en bas de page (footer)6. Préparer un maximum de photos de votre structure et des

alentours (qualité la plus élevée, nous verrons ensemble quelle est la taille idéale des photos sur le web)

7. Si possible : préparer du contenu texte à insérer

DÉCOUVREZ L’ENVIRONNEMENT

DE WIX

Rendez-vous sur http://fr.wix.com/

Créez un compte gratuit

Ressaisissez vos données

Sélectionnez un domaine d’activité

Sélectionnez le template

• Vous pouvez parcourir tous les templates

• Cliquer sur « Voir » pour avoir une démo du temptate

Le tableau de bord

Modifiez votre nom d’utilisateur pour votre nom de domaine gratuit

Cliquez sur votre nom puis sur « Paramètres du compte »

Vérifiez les paramètres du site

À ne pas manquer :• Nom de domaine gratuit ou

payant : le mettre à jour• Langue : français• Info entreprise : renseigner

vos coordonnées

• Réseaux sociaux : penser « maillage »

• Administrateurs : nommer un 2ème administrateur

Découvrir l’environnement Wix

Sauvegarder le + souvent possible Aperçu : ce que l’internaute va voirPublier : mettre le site en ligne

Menu « du haut »

Accéder à l’arborescence

Afficher + ou – d’outils

Passer en mode payant • Précédant

• Suivant• Visualiser le site en

version « mobile »• Sauvegarder• Aperçu du site • Publier le site

Menu « de droite »

La Barre d'Outil de l'Éditeur pour modifier vos éléments :• Aligner des Éléments• Rotation• Faire Pivoter des Éléments• Taille• Redimensionner des Éléments• Position • Placer les Éléments en Utilisant les paramètres X et Y

Affichage optionnelPeut être déplacée

Menu « de gauche »

• Arrière-plan

• Ajouter un élément

• App market

• Mes téléchargements

• Commencez à rédiger

Intégrez votre arborescence

Ajoutez autant de pages que nécessairePensez aux pages « filles »Renseignez les infos de pages, la mise en page, les permissionsTravaillez votre référencement

Référencement de vos pages

Définition du référencement

Indexation d’un site Internet ou de certaines pages dans les différents outils de recherche disponibles sur Internet, comme les moteurs de recherche, afin d’en améliorer la notoriété et la visibilité.

Comment fonctionne Google ?

Titre ou title

Un titre par page donnant une indication claire sur le contenu : nom de la structure + expressions (mots clés)70 caractères (pour un affichage complet)Propre à chaque page !

Description

Informe les internautes et Google du contenu de la page.Le contenu saisi apparaît dans les pages de recherche.160 à 200 caractères maximum.Propre à chaque page !

Mots clés ou keywords

Série de mots clés.N’est plus prise en compte par certains moteurs de recherche.Le moteur de recherche va privilégier un contenu textuel situé dans vos pages, vos titres, vos images

Pour mieux comprendre le référencement

Pause

ADAPTEZ LE DESIGN DE VOTRE SITE

L’eyetracking : l’œil vous dit comment organiser vos pages

La ligne de flottaison web

Modifier l’arrière-plan de page

3 possibilités : couleur, image ou vidéoPossibilité d’appliquer l’arrière plan aux autres pages du site

Paramètres pour avoir plus d’options

Ajouter du texte

Nous vous conseillons de choisir les polices du « texte assorti »2 – 3 polices max

Référencement de vos textes

Et concrètement ça donne quoi ?

Classée Réserve Naturelle, la magnifique Baie

de l'Aiguillon s'adresse particulièrement aux

amoureux de la Nature avec plus de 5000

hectares de vasières et de prés salés où

s'entremêlent les eaux douces et salées

constituant ainsi, une véritable halte

migratoire. Une découverte à prolonger à la

Pointe d'Arcay : Ce bras de sable long de cinq

kilomètres est un lieu d'observatoire privilégié

pour les ornithologues. Deux stations bordent

ces espaces naturels et vous accueillent tout

au long de l'année : L'Aiguillon sur Mer et

la Faute sur Mer. Profitez d'une balade en mer

pour apprécier les belles plages de sable fin

avant une dégustation de coquillages et de

moules ... de Bouchot, naturellement !

H1 : Le littoral du Marais PoitevinH2 : Le paradis des oiseauxLa Baie de l’Aiguillon est un espace naturel classé quiaccueille de nombreux oiseaux. Les spécialistes aimentobserver cette faune migratrice tout au long de l’année, etnotamment à l’observatoire de la Pointe d'Arcay.

H2 : Le rendez-vous des famillesPour les familles, deux stations balnéaires bordent cetespace naturel : L'Aiguillon sur Mer et la Faute sur Mer.Châteaux de sable, pêche à pied, activités nautiques,randonnées sont autant d’activités à pratiquer.

H2 : Pour les gourmandsLa spécialité culinaire locale est la moule de Bouchot,naturellement !

Pausedéjeuner

Ajouter une image

Attention au référencement de vos images

Modifiez les paramètres de vos images

Renseignez la description ou balise alternativeAttention aux mots clés

N’oubliez jamais :1 image vaut 1000 mots !

Optimiser les images pour le web

PixelC’est le point qui compose l’image. Le pixel est lui-même constitué de 3 points de couleurs différentes : rouge, vert, bleu.

DéfinitionC’est la « dimension informatique » de votre image. Il s’agit de la largeur et de la hauteur de l’image exprimée en pixels.

Résolution C’est le nombre de pixels contenus dans un pouce (=2,54cm). Elle exprime la densité de pixels dans l’image et l’unité de mesure est le DPI ou PPP (points par pouce).

Éléments à prévoir :• Poids des images pour le web: poids 1 Mo maxi = 1024 Ko• Résolution optimisée pour le web : 72 dpi • Poids des images pour l’impression : poids mini 5 Mo et résolution de 300 dpi• Le référencement des images

Les formats d’image pour le web

JPG/JPEG: Joint Photographic Experts GroupFormat d’image comprimé le + utilisé sur le web

PNG : Portable Network GraphicsPerformant, il réunit presque tous les avantages du JPEG et du GIF et permet la transparence.

GIF : Graphics Interchange Format Ce sont des fichiers basse résolution. Permet la transparence et les images animées.

Ce qu’il faut retenir

72 ou 96 dpi - 600 ko – JPEG

Outils de retouche photo

Microsoft Paint

PhotofiltreGimp

Pixlr

Photoshop

befunky

picmonkey

Trouvez des visuels « séduction » de la Vendée

Télécharger le kit de communication Sud Vendée Tourismehttp://goo.gl/forms/YAfskzC1aI

Télécharger le kit de communication Vendée Expansionhttp://www.vendee-expansion.fr/kit-com-tourisme/pages/index.html

Trouvez des visuels pour une occasion spéciale

https://pixabay.com/fr/

https://www.pexels.com/

https://picjumbo.com/

Et pour aller plus loin…

Ajouter une galerie

Pause

Ajouter un bouton…

… et donc un lien !

Ajouter une boîte

C’est tout pour aujourd’hui !

Bonjour !Nous serons vos animatrices aujourd’hui,

Et vous ?

PLAN DES 2 JOURNÉES• Faire le point sur vos “devoirs”• Découvrir l’environnement Wix• Adapter le design de vos sites

• Optimiser le contenu de votre site internet• Diffusion de votre site• Mise en ligne du site

Comment réussir sa home page ?

Les infos indispensables du header

• Intégrez votre logo• Placez votre slogan• Insérez votre menu de navigation• Placez une barre de recherche• Intégrez un « call-to-action »• Placez les icônes des réseaux sociaux

et des flux RSS• Intégrez les contacts • Intégrez un accès à l’espace

personnel de l’utilisateur (mon panier)

Les infos indispensables du footer

• Créez un lien vers le Haut de page

• Affichez les mentions légales et le copyright de votre site

• Répétez la navigation primaire du site

• Insérez des widgets• Placez les icônes des réseaux

sociaux et des flux RSS

Ajouter un menu

Ajouter une bande

Ajouter une forme

Ajouter une vidéo

Ajouter de la musique

Est-ce que c’est toujours une bonne idée ???

Souvenez-vous, Sabrina vous en a parlé…

Ajouter des réseaux sociaux

Ajouter un outil de contact

Formulaire de contact

• Cliquez sur « Ajouter »• Puis sur « Contact »• Sélectionnez le type de

formulaire à intégrer

Google map

• Allez sur www.google.fr/maps• Recherchez votre

établissement• Cliquez sur « Partager » • Choisir « Intégrer la carte »

• Choisir la taille de la carte• Copier le code• Coller le code dans votre site

Pausedéjeuner

Ajouter une liste

Ajouter un blog

Ajouter une boutique

Tableau des prix

• Allez sur « App market »• Recherchez « Table master »• Choisissez l’option « Ajouter au site »• Puis renseignez vos données• Peaufinez le design

Google Agenda

Vous répondez aux attentes des internautes :o Vous passez moins de temps à répondre aux demandes de

disponibilitéso Vous optimisez vos locations

Google Agenda vous facilite le quotidien :o Gratuito Outil de gestion interne de vos réservationso Outil d’affichage sur internet de vos disponibilitéso 1 manipulation = mise à jour de mon agenda + mise à jour de mes

disponibilités en ligne

Open System

Open System : c’est quoi ? • Une solution de réservation en ligne • Un contact direct avec le client • Une gestion autonome de votre offre • Un rapport qualité / prix imbattable • Des applications personnalisées pour votre commercialisation

Open System : pour qui ? • Hôtels • Campings • Résidences et villages de vacances • Chambres d’hôtes • Locations de vacances et agences immobilières • Sites touristiques, activités de loisirs • Restaurants • Acteurs institutionnels : Offices de Tourisme, Pôles et territoires touristiques

C’est quoi un widget ?

Ajouter plus

Flash : « pas bien » car pas visible

sur tous les supports

Boutons de connexion au site : pour

mettre des accès privés

Ancres : pour les sites one page

Boutons document : pour mettre un

doc en téléchargement

Intégrez une vidéo Youtube avec du code

• Allez sur www.youtube.com• Choisissez la vidéo à intégrer• Cliquez sur « Partager » et choisir « Intégrer »• Cliquez sur « Plus » pour personnaliser le design• Copiez le code• Collez le code dans votre site

Est-ce que vous avez pensé à …

Men

tions

lég

ales

Pause

OPTIMISEZ LE CONTENU DE VOTRE

SITE

Faire des liens de page à page

2 objectifs :• Favoriser la navigation• Travailler le référencement

Ils pointent vers un autre contenu utile (une autre page interne ou externe, un document à télécharger… = le maillage)Ils sont explicitesIls intègrent des mots clés

On évite : Cliquez ici pour télécharger nos tarifs.On privilégie : Cliquez ici pour télécharger nos tarifs.

Widget météo ou carte d’ensoleillement ?

• Allez sur http://www.meteofrance.com/meteo-widget• Sélectionnez la taille du widget• Renseignez la commune• Copiez le code• Intégrez le dans votre site wix

PENSEZ DIFFUSION DE L’INFO ET

MAILLAGE

Maillage Facebook

Cliquez sur « Ajouter »Puis sur « Réseaux sociaux »Et sélectionnez le widget de votre choix

Paramétrez votre compte et choisissez la mise en page

Maillage site d’avis

Allez sur http://www.tripadvisor.fr/WidgetsRecherchez le nom de votre établissementSélectionnez le widget de votre choix et paramétrez leCopiez le code HTML généré automatiquementRevenez sur l’editeur de votre site Cliquez sur « ajouter » et choisir « Plus » puis « Code HTML »Cliquez sur « Saisir code » puis « Mettre à jour »

Maillage signature mail

o Le contact : nom, prénom o Votre logo, une image o (votre photo ? la règle d’or : HUMANISEZ)o Votre adresseo Le lien vers votre site interneto Le lien vers votre page facebook, google +,

tripadvisor ou autre réseau …

o WiseStamp extension Firefox et Chrome permet d’afficher votre signature électronique

o Compatible : Gmail, Yahoo Mail, AOL, Hotmail

o Vous pouvez facilement tout personnaliser, y compris vos profils sociaux, partager automatiquement vos messages blog, citations, nouvelles, signets et plus encore …

Maillage avec vos supports papier

Communiquez

Communiquez sur votre présencePensez

« maillage »

MISE EN LIGNE DU SITE

Bien réfléchir au nom de domaine

Il doit être ni trop court ni trop longIl doit refléter votre activité principaleIl doit être facile à retenir spontanément par vos visiteurs

Utiliser le tiret – pour éviter une succession de mots Ajouter le nom de la commune si elle est bien référencée

Transférer un nom de domaine existant

o Possible en version proo Pour .com

Pas à pas :https://fr.wix.com/support/html5/domaines/transferts-de-domaines/kb/transf%C3%A9rer-un-domaine-achet%C3%A9-ailleurs-chez-wix

https://fr.wix.com/support/html5/domaines/connecter-mon-domaine-%C3%A0-wix/kb/instructions-pour-plusieurs-h%C3%A9bergeurs-de-domaines-ex-network-solutions-godaddy-yahoo-etc

Forfaits premium

C’est tout pour aujourd’hui !

POUR ALLER + LOIN

Outil de contrôle SEO

App Market : pour + tard…

Vendre en ligne avec Wix

Centre d’activité

Newsletter avec ShoutOut

Smart Actions

Consultez le centre d’assistancehttps://fr.wix.com/support/html5/

Et si vous vous lanciez dans un blog ?

1.Cliquez sur Ajouter sur le côté gauche de l'Éditeur2.Cliquez sur Blog3.Cliquez sur une mise en page de blog pour l'ajouter ou faites là glisser vers l'intérieur de votre page

Quel est l’intérêt ?• Pour le référencement• Pour humaniser, montrer votre « vision »• Pour se positionner en expert • Pour nouer une relation plus informelle• Pour avoir du contenu pertinent sur les

réseaux sociaux• Pour le plaisir…?

Merci ! bit.ly/enquete-satisfaction-atelier

Des questions ?

Sud Vendée TourismeTél. : 02 51 87 69 07c.loizeau@sudvendeetourisme.com

CRÉDITS ET SOURCES :

Photos : PixabayPexelDeath to stockCreative commons wikipedia

Sources : Réseau Animateur Numérique de Territoire FranceCentre d’aide FacebookThink with GoogleBaromètre Raffour 2015 LeblogdumoderateurEtourisme.infoAtelier numérique Jimdo du Bocage NormandAtelier numérique Jimdo du Vignoble de NantesConférence “C’est quoi un bon site web?” par Web Créatif