atelier numérique créer son site wix
TRANSCRIPT
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
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
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 [email protected]
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