Trucs et astuces du web

104
TRUCS ET ASTUCES DU WEB

Transcript of Trucs et astuces du web

Page 1: Trucs et astuces du web

TRUCS ET ASTUCES DU WEB

Page 2: Trucs et astuces du web

AU PROGRAMME

# Réduire une URL# Créer un QR Code# Jing# Animoto et Photofiltre# Les disponibilités sur son site:

> avec Google Agenda# Insérer un widget sur son site internet :

> Météo> Tripadvisor> Facebook

# Wisestamp# Calaméo# Picmonkey

Page 3: Trucs et astuces du web

RÉDUIRE UNE URL

Page 4: Trucs et astuces du web

RÉDUIRE UNE URL

une URL ?

Page 5: Trucs et astuces du web

RÉDUIRE UNE URL

Twitter y recours systématiquement pour

intégrer des liens dans ses messages sans pénaliser la

taille de ceux-ci.

Pourquoi ?

Page 6: Trucs et astuces du web

RÉDUIRE UNE URL

Une URL plus courte est plus facile à retenir

Pourquoi ?

Page 7: Trucs et astuces du web

RÉDUIRE UNE URL

Raccourcir une URL permet d’obtenir des QR codes plus

simples et plus lisibles.

Pourquoi ?

Page 8: Trucs et astuces du web

RÉDUIRE UNE URL

Moins de caractères à encoder, c’est un code plus

facile à lire par mon smartphone !

Pourquoi ?

Page 9: Trucs et astuces du web

RÉDUIRE UNE URL

En utilisant des générateurs de liens courts

Comment ?

Page 10: Trucs et astuces du web

RÉDUIRE UNE URL

Générateurs de liens courts:

Le plus ancien: Assure que les url raccourcies par son service n’expireront jamais. Garantie non négligeable.

Le plus complet et populaire: Vous pouvez alors personnaliser vos liens, voir l’historique de vos liens, les rechercher, les regrouper et les classer.

Googlemania: Raccourcisseur d’url officiel de Google. Fiable et sûr.

Page 11: Trucs et astuces du web

RÉDUIRE UNE URL

Mise en pratique avec Google URL Shortener:

1. Allez sur le site internet www.rochefort-ocean.com, rubrique “Découvrir”, puis “Destination Rochefort Océan” et enfin “Rochefort” : http://www.rochefort-ocean.com/decouvrir/destination-rochefort-ocean/rochefort

2. Copiez-collez l’adresse URL de cette page

Page 12: Trucs et astuces du web

RÉDUIRE UNE URL

Dans le cadre rouge, vous avez l’URL raccourcie.

En-dessous, vous trouvez la page vers laquelle elle renvoie.

Page 13: Trucs et astuces du web

RÉDUIRE UNE URL

Je peux l’utiliser sur une carte de visite ou sur un flyer pour gagner de la place.

Le plus : personnalisez votre URL raccourcie avec Bitly par exemple.

Page 14: Trucs et astuces du web

RÉDUIRE UNE URL

Il est réellement plus facile de retenir l’URL raccourcie que l’URL vers laquelle elle renvoie

Page 15: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Page 16: Trucs et astuces du web

RÉDUIRE UNE URL

Vidéo explicative sur:http://goo.gl/Evsnte

#ONPDPNotez l’URL raccourcie !

Qu’est ce que c’est unQR CODE ?

CRÉER UN QR CODE

Page 17: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Comme vous pourrez le découvrir dans la vidéo, voilà un QR code :

On le retrouve partout: dans les magazines, sur les affiches,packagings produit ou cartes de visites...

Il permet d’accéder à un contenu en ligne à l’aide d’un téléphoneportable (smartphones, Iphone).

Et pour créer un QR code, vous devez utiliser un logiciel en ligne.

Page 18: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Nous utiliserons le logiciel en ligne UNITAG:

Dans l’encadré rouge, choisissez le type de

QR code que vous souhaitez créer.

Page 19: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Si vous souhaitez que le QR code renvoie vers une page internet:

Choisir l’option Web et réseaux sociaux.

Entrez l’URL de la page.

N’oubliez pas !URL raccourcie = QR code + simple et + lisible !

Page 20: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Si vous souhaitez que le QR code renvoie vers une page internet:

Vous pouvez:

* intégrez le QR code à votre site internet en utilisant le code généré* téléchargez le QR code

Page 21: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Si vous souhaitez que le QR code renvoie vers un autre type d’information:

Choisir l’option Autres types.

Page 22: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Si vous souhaitez personnaliser votre QR code:

Page 23: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

À ne pas oublier avant de diffuser votre QR code:

Tester votre QR code avec plusieurs appareils:Iphone, Blackberry, Android ou Windows phone

Page 24: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

Plus d’info en flashant le QR code:

Page 25: Trucs et astuces du web

RÉDUIRE UNE URLCRÉER UN QR CODE

En générant votre QR Code, vous obtenez aussi ces 2 visuels à utiliser sur vos outils de communication

Page 27: Trucs et astuces du web

JING

Outil de capture d’écran

Page 28: Trucs et astuces du web

JING

Cliquez sur le + pour capturer l’écran

Sélectionnez la zone à capturer:Mettez le curseur dans l’angle en haut à gauche de

l’image, maintenez la sélection et faites descendre le curseur jusqu’à l’angle en bas à

droite.

Page 29: Trucs et astuces du web

JING

Une fois la zone de capture effectuée une barre de tâches va apparaître.

Elle vous permet de :* Valider votre capture d’écran* Faire une vidéo* Annuler la sélection si l’image ne vous convient pas et en faire une de nouveau (avec la flèche)* Annuler la capture d’écran (avec la croix)

Page 30: Trucs et astuces du web

JING

Annuler/ supprimer la capture

En cliquant sur le logo de capture d’écran, vous pouvez:

Donnez un nom à votre capture

Faire une copie de la capture

Ajoutez des flèches ou des encadrements texte sur votre capture

Page 31: Trucs et astuces du web

ANIMOTO

Outil en ligne de montage vidéo automatisé.

Extrêmement simple à utiliser : il suffit de choisir des photos, des vidéos, une musique, du texte et Animoto compile tout automatiquement pour un rendu esthétique et professionnel !

Page 33: Trucs et astuces du web

ANIMOTO

Créez votre vidéo

Page 34: Trucs et astuces du web

ANIMOTO

Choisissez votre modèle

Page 35: Trucs et astuces du web

ANIMOTO

Page 36: Trucs et astuces du web

ANIMOTO

Page 37: Trucs et astuces du web

PHOTOFILTRE

Pour redimensionner le poids de vos photos.

1. Télécharger Photofiltre 72. Ouvrez votre photo3. Allez dans “image” puis

“taille de l’image”

Page 38: Trucs et astuces du web

PHOTOFILTRE

Pour redimensionner le poids de vos photos.

4. Modifiez la largeur ou la hauteur5. Dans le cadre “Mémoire”, le poids de votre photo doit être au maxi autour de 300ko

Page 39: Trucs et astuces du web

LES DISPOS SUR MON SITEAVEC GOOGLE AGENDA

Page 40: Trucs et astuces du web

Étape 1 : Création d'un agenda pour chaque chambre/meublé

Une fois connecté(e) à votre espace Google Agenda, créez 1 agenda par chambre/meublé en

plus de celui installé par défaut correspondant à votre compte Google:

> Cliquez sur le lien nommé "créer" à gauche de la page, dans le bloc Mes Agendas.

> Donner le nom d'une de vos chambres/meublés à chaque nouvel agenda et veiller à bien

cocher: "Rendre cet agenda public" et "Afficher uniquement ma disponibilité".

Page 41: Trucs et astuces du web

Étape 1 : Création d'un agenda pour chaque chambre/meublé

Page 42: Trucs et astuces du web

Étape 1 : Création d'un agenda pour chaque chambre/meublé

Page 43: Trucs et astuces du web

Étape 2 : Créer une réservation express pour une chambre/meublé

Maintenant vos agendas sont

visibles sur le côté gauche de la

page, vous pouvez modifier leur

couleur en cliquant sur la petite

flèche à droite de chaque agenda

dans le bloc "Mes Agendas".

Page 44: Trucs et astuces du web

Étape 2 : Créer une réservation express pour une chambre/meublé

Insérons maintenant une réservation pour 3 nuits pour Monsieur Marcel Pagnol qui

séjournera dans la chambre jaune.

Pour insérer des journées complètes, pensez à cliquer dans la zone au-dessus des

plages horaires, comme dans la capture ci-après. Nous mettons donc le nom de

notre client dans la partie “Objet” et surtout, maintenant, vous allez cliquer

sur "Modifier les détails de l'événement".

Page 45: Trucs et astuces du web

Étape 2 : Créer une réservation express pour une chambre/meublé

Nous allons ainsi pouvoir préciser que la chambre jaune est

OCCUPÉE pour ces 3 nuits, du 12 au 14 décembre.

Page 46: Trucs et astuces du web

Étape 2 : Créer une réservation express pour une chambre/meublé

Une fois les champs renseignés, cliquez sur “Enregistrer”.

Sur la diapositive suivante, vous

trouverez le rendu final de la

réservation.

Page 47: Trucs et astuces du web

Étape 2 : Créer une réservation express pour une chambre/meublé

Page 48: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Vous allez pouvoir exporter vos agendas dans votre site Internet sans afficher le

détail des réservations, précisant juste à l'internaute si à telle date, la

chambre jaune est occupée.

Avec ce genre de pratique, vous allez voir réduire le nombre d'emails de demandes

de disponibilité. Ici, plus besoin d'emails, l'internaute a la réponse sous les

yeux et même si vous ne proposez pas de réservation en ligne, vous avez fait le

principal !!! Alors voyons comment cela se passe.

Vous allez cliquer sur la petite flèche de votre première chambre listée dans le

bloc "Mes agendas", vous découvrez le lien "Paramètres de l'agenda".

Page 49: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Cliquez sur la flèche puis ensuite sur “Paramètres”.

Vous trouverez une copie d’écran de la page qui s’ouvre sur la diapo suivante.

Page 50: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Une fenêtre s'ouvre et

vous permet de modifier

les paramètres de cet

agenda. Nous allons

maintenant voir comment

personnaliser l’

intégration de votre

élément en cliquant sur

“Personnaliser la couleur,

la taille et d’autres

options” dans l’encadré

rouge.

Page 51: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Vous voici dans l'espace de personnalisation. Vous allez pouvoir:

> Donner un titre global à votre module Agenda qui sera exporté. Ici, j'ai mis

"Disponibilités Gîte du Figuier". Ensuite, libre à vous de cocher ou décocher les

éléments à afficher pour naviguer dans vos plannings de disponibilités.

******

L'astuce, en rouge dans la capture:Remplacer la largeur en pixel pré-paramétrée par une valeur relative: ici 100%. Cela veut dire qu'une fois intégré dans votre page web, ce module Agenda prendra 100% de la largeur disponible dans votre page. C'est parfaitement intégré ainsi.

Faites également commencer la semaine un lundi, ce sera mieux pour voir

les disponibilités du week-end.

Page 52: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Page 53: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

En bas à gauche de cette page de

personnalisation, vous allez pouvoir choisir

les agendas à afficher dans votre page Web.

Libre à vous de choisir une seule chambre si

dans votre site, votre planning est affiché

dans une page de détail de la chambre jaune par

exemple. Sinon, une page Disponibilités fera

l'affaire, alors, nous cocherons toutes les

chambres.

Page 54: Trucs et astuces du web

Étape 3 : Exporter mes agendas chambre/meublé pour intégration dans mon site Internet

Vous avez terminé la personnalisation de votre agenda à exporter, il est temps

maintenant de remonter tout en haut de la page et de copier-coller le code HTML

que nous allons maintenant intégrer sur votre site Internet.

Page 55: Trucs et astuces du web

Étape 4 : Intégration dans mon site Internet, exemple avec un site Jimdo

Vous avez différentes manières

d'accéder à l'administration de votre

site Internet, parfois, vous ne le

pourrez pas, c'est votre prestataire

qui fera cette dernière étape. Pour

faciliter la démonstration, j'utilise

un site réalisé avec Jimdo. Je vais

donc aller sur une page

"Disponibilités" et y ajouter un nouvel

élément de contenu Jimdo, je choisis :

WIDGET/HTML.

Page 56: Trucs et astuces du web

Étape 4 : Intégration dans mon site Internet, exemple avec un site Jimdo

Je viens alors coller mon code html toujours en mémoire depuis que je

l'ai copié sur ma page de personnalisation Google Agenda.

Page 57: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR SON SITE INTERNET

INSÉRER UN WIDGET MÉTÉOSUR MON SITE INTERNET

Page 58: Trucs et astuces du web

INSÉRER UN WIDGET MÉTÉOSUR MON SITE INTERNET

Code HTML à copier dans votre site internet:<iframe src="http://modules.meteorem.com/ws/?module=y9zc28rJ4dfoi7Tc0trh4ZSkmw==" width="320&quot;" height="300"></iframe>

L’Office de Tourisme Rochefort Océan propose la mise en place d'un WebServices Météo sur vos sites internet via Météorem, fournisseur

de services météorologique.

Sur votre site, prévoir un espace adapté.Car si vous réduisez la taille du widget, il

n’apparaît pas en entier.

Page 59: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Condition: votre établissement est référencé sur TripAdvisor et vous êtes propriétaires de votre fiche.

Page 60: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Connectez-vous sur le site de Tripadvisor: www.tripadvisor.com et connectez-vous à votre compte

Page 61: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Page 62: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Page 63: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Cliquez sur “Outils Marketing Gratuits”

Page 64: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Choisissez le visuel/widget que vous souhaitez intégrer sur votre site

internet

Page 65: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Personnalisez votre widget:- Langue- Taille- Bordures- Ombre- Couleur

Au fur et à mesure de votre personnalisation, vous avez un aperçu de votre futur widget

Page 66: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Tout en bas de page, vous trouverez le code HTML qu’il faudra copier et coller dans l’une de vos pages internet.

Vous pouvez également l’envoyer par mail à la personne qui gère votre site pour qu’elle fasse la manipulation pour vous.

Page 67: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR MON SITE INTERNET

Exemple du site internet de l’Office de Tourisme Rochefort Océan

Page 68: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR SON MITE INTERNET

Condition: Vous avez créé une page Facebook pour votre établissement.

Page 69: Trucs et astuces du web

INSÉRER UN WIDGET TRIPADVISOR SUR SON SITE INTERNET

Connectez-vous sur Facebook: connectez-vous à votre compte.

INSÉRER UN WIDGET FACEBOOK SUR MON SITE INTERNET

Page 70: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

Pour créer votre widget Facebook, cliquez sur le lien: https://developers.facebook.com/docs/plugins/like

Cliquez ensuite sur DOCS et MODULES SOCIAUX(voir page suivante)

Page 71: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

1 2

3

Page 72: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

Descendez sur la page et sélectionnez:

LIKE BOX

Page 73: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

1. Copiez l’adresse de votre page Facebook dans “FACEBOOK PAGE URL”

Si vous n’avez pas de page Facebook, vous pouvez intégrer celle de l’Office de Tourisme !

Page 74: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

Personnalisez votre widget et voyez le résultat en direct: le visuel du widget change au fur et à mesure de

votre personnalisation.

Page 75: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

Une fois votre personnalisation terminée, cliquez sur “GET

CODE”.

Page 76: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

La fenêtre ci-dessus s’ouvre.Cliquez sur “IFRAME” pour obtenir votre code en format HTML.Si vous avez créé votre site internet il faudra copier et coller ce code dans l’une de vos pages internet.Vous pouvez également l’envoyer par mail à la personne qui gère votre site pour qu’elle fasse la manipulation pour vous.

Page 77: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOK SUR MON SITE INTERNET

Il existe d’autres widgets Facebook à intégrer sur vos sites internet.Vous les retrouvez en cliquant sous Modules sociaux:

Page 78: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOK SUR MON SITE INTERNET

Bouton “J’aime pour le web”:le visiteur va aimer votre page

Page 79: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOK SUR MON SITE INTERNET

Bouton “Share Button”:le visiteur partage votre page avec ses amis

Page 80: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOK SUR MON SITE INTERNET

Bouton “Send Button”:le visiteur envoie par mail l’info de votre page à des connaissances

Page 81: Trucs et astuces du web

INSÉRER UN WIDGET FACEBOOKSUR MON SITE INTERNET

Exemple du site internet de l’Office de Tourisme Rochefort Océan

Page 82: Trucs et astuces du web

WISESTAMP

Pour cette partie, nous allons utilisé le navigateur Google Chrome.

Page 83: Trucs et astuces du web

WISESTAMP

Rendez-vous sur la page: http://webapp.wisestamp.com/

Page 84: Trucs et astuces du web

WISESTAMP

Renseignez les champs sur la partie gauche de l’écran.

Vous voyez en direct l’évolution de votre signature au milieu de l’écran.

Page 85: Trucs et astuces du web

WISESTAMP

Vous pouvez personnaliser la couleur, ajouter les liens vers vos réseaux sociaux ...

Page 86: Trucs et astuces du web

WISESTAMP

Lorsque vous avez terminé votre personnalisation, cliquez sur

“OK,I’M DONE”

Page 87: Trucs et astuces du web

WISESTAMP

La fenêtre ci-dessous va s’ouvrir, cliquez sur “AJOUTER”.

Page 88: Trucs et astuces du web

WISESTAMP

Choisissez le service de messagerie que vous utilisez:

Page 89: Trucs et astuces du web

WISESTAMP

Créez un compte pour activer votre signature.

Page 90: Trucs et astuces du web

WISESTAMP

Collez votre signature Wisestamp dans la signature de votre service de messagerie.

Supprimez l’extension dans les paramètres du navigateur.

Page 91: Trucs et astuces du web

WISESTAMP

Exemple de signature de l’Office de Tourisme:

Page 92: Trucs et astuces du web

CALAMÉO

Calaméo vous permet de publier tout type de document (word, powerpoint, pdf..) sur votre site internet.

De nombreux outils de personnalisation sont à votre disposition pour présenter vos documents de manière originale et pratique.

Permet de connaître le nombre de téléchargements de la brochure et d’alléger votre site internet.

Page 93: Trucs et astuces du web

CALAMÉO

Connectez-vous sur le site de Calaméo et créez un compte:

Page 94: Trucs et astuces du web

CALAMÉO

Cliquez sur “PUBLIER” pour intégrer vos brochures

Page 95: Trucs et astuces du web

CALAMÉO

Page 96: Trucs et astuces du web

CALAMÉO

Et personnalisez votre publication. Dans l’onglet “GÉNÉRAL”

Page 97: Trucs et astuces du web

CALAMÉO

Et personnalisez votre publication. Dans l’onglet “PARTAGE”

Page 98: Trucs et astuces du web

CALAMÉO

Et personnalisez votre publication. Dans l’onglet “PARTAGE”

Page 99: Trucs et astuces du web

CALAMÉO

Une fois la personnalisation terminée, cliquez sur

“PUBLIER”

Cliquez sur la flèche

puis

Cliquez sur intégrer

Page 100: Trucs et astuces du web

CALAMÉO

Pour intégrer votre publication sur votre site internet:

* copiez le code (en bas) et collez-le dans votre site internet* ou envoyez-le à votre prestataire informatique.

Page 101: Trucs et astuces du web

PICMONKEY

Page 102: Trucs et astuces du web

MERCI

CONTACTS

Page 103: Trucs et astuces du web

NOS PROCHAINS RENDEZ-VOUS

En 2015:

❏ Pause numérique “Internet de séjour”: mardi 27 janvier à 14h30❏ Journée Conférence “RDV en Terre Numérique”: lundi 2 février ❏ Atelier - Les sites d’avis: mardi 10 février à 9h ou jeudi 12 février à 14h❏ Pause numérique “Le Monde Google”: mardi Mardi 17 février à 14h30 ❏ Atelier - Audit de site: mardi 10 mars à 9h ou jeudi 12 mars à 14h❏ Atelier - Photos et images: bases et outils: mardi 17 mars à 9h ou jeudi 19

mars à 14h