Les Astuces de Jeanviet » Blog

Partager ses photos Instagram depuis son mobile sur un blog

Jeanviet — Wed, 29 Apr 2015 11:41:07 +0000

Petit tutoriel express rédigé au restaurant depuis mon mobile ; )

Objectif : utiliser Instagram pour alimenter en mobilité automatiquement un tumblr.

Prérequis

Un tumblr : voir mon tuto créer un tumblr pro
L’appli Instagram

Comment faire pour partager une photo instagram sur son tumblr ?

1- Prenez une photo avec instagram

2- Activez le partage tumblr et publiez !

3- Et voilà !

Ce partage instagram est maintenant visible sur mon blog solomo.fr

Cet article Partager ses photos Instagram depuis son mobile sur un blog est apparu en premier sur Les Astuces de Jeanviet.

Twitter.com : tweeter, twiter, retweet, RT, @, # … C’est quoi twitter ?

Jeanviet — Sun, 21 Mar 2010 15:59:45 +0000

Cela va faire bientôt 1 an que je communique des brèves via twitter (les fameux tweets) et que je suis toutes les actus / buzzs / conversations qui circulent sur ce réseau social…

Même pour un internaute expérimenté / bloggueur aggueri comme moi, je dois avouer que j’ai eu beaucoup de mal à comprendre le concept et son intérêt au départ. Maintenant que je suis devenu un utilisateur régulier de twitter (et que je comprends mieux ses codes et son écosystème), je vous propose de vous expliquer par des exemples comment bien s’en servir :

comment suivre les news d’une personnalité / star ?
comment communiquer auprès de sa communauté ?
comment savoir ce qui buzze en temps réel (clips, photos, news) ?
comment trouver des sites sympas grâce aux conversations sur twitter ?

En arrivant sur la page d’accueil twitter la première fois…

… On peut trouver tout ça déroutant !! Que dois-je faire : Rechercher (1) oui, mais quoi ? cliquez sur les recherches mondiales suggérées (2) oui, mais pourquoi ? M’inscire (3) oui, mais pourquoi ? Me connecter (4) Ok, si j’ai un compte (mais on ne me dit pas à quoi ça sert :-().

Même si l’interface est en français, on souhaiterait être un peu plus accompagné (comptes à suivre, photos et articles qui buzzent) et que les exemples des sujets en vogues collent aux problématiques des internautes français (c’est quoi "Happy Pi Day" ? pourquoi on m’affiche ça ?)

En accédant à des tweets ou à des comptes twitters depuis les sites web / blogs qui mettent en avant leurs comptes, on est tout aussi dérouté : de quoi parle-t-il ? à qui ?

Twitter, c’est quoi ?

Twitter est un moyen de communication accesible depuis internet ou depuis son mobile (comme le mail) qui permet à tout à chacun d’envoyer un message de moins de 140 caractères au monde entier ! Dans ce message, on peut :

partager une adresse de site internet (clic sur l’image pour voir le lien)

communiquer son humeur, une envie, un souhait

partager une photo hebergé sur un site internet (clic sur l’image pour voir le lien)

commenter l’actualité, un évènement, une emission de TV

partager sa position géographique (clic sur l’image pour voir le lien)

poser une question

répondre à une question

Tous ces messages sont publiques, publiés instantanément, et sont conservés en ligne définitivement (à moins de les supprimer manuellement) et accessible par ordre antechronolgique depuis votre adresse twitter (twitter.com/votre_pseudo).

A quoi ça sert Twitter ?

Voilà pour moi les 3 grandes force de twitter :

1/ Sans connaissances techniques, je peux parler sur la toile depuis mon mobile ou mon pc et être entendu par n’importe quel internaute dans le monde entier !

2/ Je peux suivre une ou plusieurs personnes (proches, amis, inconnus, célébrités), connaître leurs anecdotes / bons plans ou même avoir une communication directe avec une personnalité (sans déformation des médias)

3/ Toutes ces conversations créent des buzzs (on est passé en 3 ans de 5 000 conversations par jour à 50 000 000 !!)… Cet effet de masse (popularité d’un message ou d’un site relayé sur le réseau) vous permet de découvrir des informations étonnantes, des bons plans, dans le temps ou dans l’instantanéité

Maintenant qu’on a vu les exemples, et les 3 grands usages à maîtriser absolument… Passons à la pratique ! Twitter est un formidable réseau ouvert qui ne se limite pas à une connexion sur twitter.com ! Des milliers d’outils se sont développés autour du réseau… Beaucoup sont inutiles ou perfectibles, les 3 grands moteurs de recherche (Google, Yahoo!, Bing) commencent tout juste à s’y connecter… leur intégration n’est pas encore parfaite.

Des outils comme Topsy (mesure du buzz) , Bit.ly (raccourcisseur d’url et outil stats), Yfrog (hébergeur d’image et raccourcisseur d’url) deviennent vites indispensables pour tirer le meilleur parti du réseau….

Comment communiquer sur Twitter ?

Au sommaire de cet apprentissage de la communication sur Twitter :

Créer un compte twitter
Suivre les messages d’un compte twitter (s’abonner / follow)
Etre suivi sur twitter (avoir des abonnés / followers)
Poster un message sur Twitter (tweet)
C’est quoi un Retweet ?
Comment répondre à un tweet ?
Les Follow Friday
Poster un lien sur twitter
Poster une image sur twitter

1. Créer un compte sur Twitter

Etape indispensable, si vous souhaitez communiquer sur twitter… Cela prend moins de 2 minutes. Pour créer un compte, rendez-vous ici : https://twitter.com/signup

Remplissez les champs comme suit :

Renseignez votre prénom + nom, un pseudo (très important de prendre qqch de simple, ça sera l’adresse que vous communiquerez !), mot de passe (bien sécurisé), email… puis cliquez sur "Créer mon compte". Ensuite un petit contrôle de routine pour éviter le passage de robots spammers (@Twitter_FR des efforts de traduction sont à faire les gars :-() :

Cliquez sur terminer (votre compte sera créé !!!)

2. Suivre les messages d’un compte twitter (s’abonner / follow)

Très bonne initiative de twitter (c’est récent), l’écran d’après vous propose d’ajouter des comptes à suivre ! en suivant un compte, vous recevrez tous ces messages dans votre "boîte de réception".

1ère étape suggestion, vous pouvez regarder ce qu’il y a dans France et vous abonnez au compte LePost par exemple comme ci-dessous

Une fois le bouton "suivre" cliqué, vous devenez abonné ! vous recevrez tous les messages de Le Post (ses tweets) dans votre Timeline (boîte de réception qui classe les message par ordre antéchronologique). Passons à la prochaine étape : "amis"

Vous remarquerez en haut à droite que vous suivez dorénavant un compte, celui de "Le Post". La 2ème étape "Amis" est trop intrusive à mon goût (on nous demande un accès à votre mail pour récupérer vos contacts !), je vous propose de la passer et de cliquer sur autres.

Dernière étape ! Vous allez me chercher : jeanviet et cliquez sur le bouton suivre !

Bravo vous suivez désormais 2 comptes twitter, cliquez sur Terminé !

Vous arrivez ensuite connecté sur votre boîte de réception twitter (timeline) et voyez les derniers messages des comptes que vous suivez :

Pour que votre compte soit totalement actif, n’oubliez pas de vous connecter à votre boîte mail et de cliquer sur le lien d’activation twitter (@Twitter_FR ils sont vraiment à la ramasse vos traducteurs, encore un message entièrement en anglais :-():

Ensuite, pour suivre les derniers messages des comptes auquels vous vous êtes abonnés, il faudra vous rendre sur http://twitter.com en mode loggué.

Pour vous aider à suivre les comptes qui comptent, Le blog du modérateur a concoté ici de très belles listes : Listes des personnes à suivre absolument sur Twitter… Il y a également un guide thématique très bien fourni des comptes francophones à suivre sur Qui Twitte ?

Si vous souhaitez chercher des personnalités ou des personnes de votre entourage, vous pouvez utiliser le moteur de recherche de personnes de twitter ou vous rendre sur twittercounter qui donne les classements de tous les comptes twitter… On y retrouve notamment Asthon Kutcher, Britney Spears, Justin Bieber, Lady Gaga, … il suffit de cliquer sur follow pour les suivre.

3. Etre suivi sur twitter (avoir des abonnés / followers)

Publier des messages sur twitter n’a de sens que si vous avez au moins 5 ou 6 personnes qui vous suivent… plusieurs techniques pour obtenir des abonnés :

Si vous avez des amis sur le réseau, connectez vous à eux, ils vous suivront naturellement derrière s’ils sont un peu actifs
Ajoutez votre adresse twitter (http://twitter.com/jeanviet) en dessous de votre signature email
Ajoutez un lien vers votre compte twitter sur votre blog avec un petit texte du style suivez-moi !

Voilà principalement comme j’ai obtenu quelques abonnés au départ… Ensuite en étant actif sur twitter, vous serez amené à être cité (follow friday) et relayé (retweet), ce qui pourra vous générer de nouveaux abonnés.

4. Postez un message sur twitter

Maintenant que vous avez au moins 5 lecteurs (abonnés) et quelques abonnements (comptes que vous suivez), vous pouvez commencer à twitter : poster le genre de messages qu’on a vu plus haut (dans twitter c’est quoi).

Rendez-vous sur twitter.com, sous "Quoi de neuf ?" rentrez un message de moins de 140 caractères (décompte des caractères restants à droite : 91)

En appuyant sur "Actualiser" mes 192 abonnés verront mon message apparaître dans leur timeline… et bien plus si ils le relayent (Retweetent) ensuite à leurs abonnés respectifs.

5. C’est quoi un Retweet ?

Twitter donne la possibilité de relayer les messages des comptes qu’on suit à ces abonnés, cette action s’appelle un retweet !

Le message précédent avait été écrit par CyrilLopez (url pour regarder tf1 en streaming), Domtomweb qui suit CyrilLopez a retweeté ce bon plan en appuyant en bas à droite du message sur Retweeter. Comme je suis Domtomweb, j’ai vu arriver ce Retweet… J’ai cliqué sur le lien pour voir si ça marchait vraiment… Ca marche, donc vrai bon plan que je retweete à mes abonnés derrière (la boucle est bouclée)

Quand vous voyez un message commençant par 2 flèches qui se suivent ou par RT@comptetwitter, il s’agit d’un retweet. Ca permet de décrouvrir aussi de nouveaux comptes (je me suis abonné derrière au compte de CyrilLopez)

6. Répondre à un Tweet (ou adresser un message à un utilisateur)

Sur Twitter, vous n’êtes pas obligé de toujours vous adresser à l’ensemble de vos abonnés, vous pouvez parler à un utilisateur en particulier

Au survol de chaque message auquel vous êtes abonné, vous avez la possibilité d’y répondre (ici ça se matérilisera par @orangewikipedia dans votre message) ou de le relayer (RT @orangewikipedia). lorsque vous répondez à un message, vos abonnés ne le voient pas dans leur timeline (à moins qu’ils suivent également la personne, dans ce cas ils ont bien l’intégralité de conversation : question de la personne + votre réponse).

Chaque fois qu’on utilise @ devant un pseudo (@jeanviet), cela signifie qu’on vous cite ou qu’on vous répond.

Si le tweet d’un compte que vous suivez commence par @pseudo+que+vous+ne+suivez+pas (on répond ici), vous ne verrez pas ce message perso dans votre timeline (l’interessé oui). En revanche s’il commence ainsi "salut @pseudo+que+vous+ne+suivez+pas", vous le verrez dans votre tiemline (on cite ici, puisque le @pseudo vient après du texte)…

Quoi qu’il arrive ces messages sont tous publiques et accessible à l’adresse twitter de l’intéressé : http://twitter.com/jeanviet si c’est moi qui les propage.

7. Les follow friday (comptes à suivre le vendredi)

Chaque vendredi, est née une habitude sur twitter qui consiste à citer les comptes twitter à suivre, ces comptes qui nous ont fait partager des bons plans (ceux qu’on retweete le plus notamment)

On fait précédé le tweet de #ff ou #FollowFriday, et on cite les comptes à suivre (avec le @ devant chaque compte, comme cela l’intéressé voit qu’on le recommande). mrboo à mis en place une appli web qui les génère automatiquement pour vous ici à partir de votre nom twitter : http://AutoFF.com En étant cité, vous verrez votre nombre d’abonnés augmenter naturellement. Sur twitter, on cherche tous à trouver les bons comptes à suivre !

8. Poster un lien sur twitter

On peut poster un lien direct (url) sur twitter dans "Quoi de neuf ?" sans problème

Le souci avec l’exemple précédent vient du fait que j’ai déjà consommé 109 caractères et n’ai plus que 31 caractères pour m’exprimer Alors on utilise plutôt des raccourcisseurs d’url comme http://bit.ly qui jouent aussi le rôle de trackeur statistique (l’url de redirection vous permet de connaître le nombre de clics dans le temps). RDV donc sur bit.ly pour raccourcir notre url

Rentrez votre url puis appuyez sur le bouton Shorten (raccourcir en français) (1), récupérez votre lien bit.ly (2) : http://bit.ly/bKDLjK qui ne fait plus que 20 caractères et collez-le dans "Quoi de neuf ?" (120 caractères restant pour s’exprimer), plus tard en rajoutant un + à ce lien vous obtiendrez ses stats de clic (3) : http://bit.ly/bKDLjK+

9. Poster une image sur twitter

Pour partager une image il faut l’héberger sur le web et générer une url courte d’accès… yfrog.com fait ça très bien ! RDV ici http://yfrog.com et cliquez en haut à droite sur sign in with twitter (autoriser à l’écran d’après) pour connecter votre comptre twitter à yfrog

Allez chercher votre image (1), ajouter un petit message d’accompagnement (2), et appuyez sur pense bête (3)….

La photo et le message apparaîtront sur votre compte twitter comme ceci :

Le lien yfrog pointant vers la photo (qui au bout de 5 minutes a déjà été vu 24 fois ;-))

Bravo d’avoir été au bout de cette partie communication twitter ! vous savez normalement ce qu’est un tweet, retweet, une citation ( texte + @pseudo), une réponse (@pesudo + texte), et vous avez compris qu’au delà du texte, beaucoup de liens et d’images s’échangeaient aussi sur twitter… Nous allons voir maintenant comment détecter et mesurer tout ce buzz en mouvement !

Détecter et mesurer les buzzs sur Twitter

Vous n’êtes pas obligé de communiquer sur twitter pour aller y chercher les bons plans, sites qui buzzent, et infos les plus souvent relayés. Grâce au moteur de recherche Topsy, il est possible de connaître les disscussions, photos, liens, videos, articles, qui ont été le plus souvent retweetés, voyons ensemble comment :

Découvrir les pages web qui buzzent le plus sur twitter
Connaître les pages d’un site qui buzzent le plus sur twitter
Suivre les twitts les plus populaires d’un compte twitter
Rechercher des sites en vogue sur un sujet donné

Connectez-vous d’abord à Topsy.com

1. Découvrir les pages web qui buzzent le plus sur twitter

Tous les Tweets, Pages Web, Photos les plus souvent tweetés et retweetés se trouvent sur trending

Pour avoir les 100 pages web les plus tweetées récemment cliquez ici :

On peut aussi restreindre aux Tweets en français, mieux vaut prendre des top 1 000 (1K), 5 000 (5K), ou 20 000 (20k) pour avoir de l’info fraîche… Twitter n’étant pas encore fortement utilisé en France.

2. Connaître les pages d’un site qui buzzent le plus sur twitter

Sur topsy on peut utiliser des options de filtrage qui permettent de restreindre les résultats à un site en utilisant site:nomdusite.com. Vous pouvez ensuite décidez si vous voulez les résultats les plus tweetés de l’heure, du jour, de la semaine, du mois,…ou toute période.

Pour connaître les vidéos Youtube qui buzzent le plus sur twitter : http://topsy.com/s/site%3Ayoutube.com?window=a / dernier clip de lady gaga et beyoncé, video chatroulette d’une impro au piano,…

Pour connaître les articles wikipedia fr qui buzzent le plus sur twitter : http://topsy.com/s/site%3Afr.wikipedia.org?window=m On retrouve Jean Ferrat (RIP), Topaloff (RIP), Equinoxe (printemps), Milgram (lié à l’emission de télé de france 2 Zone Extrême), Journée de PI (le fameux happy pi day du début ;-))

On peut regarder aussi pour lemonde.fr, lepost.fr,…

3. Connaître les pages les pages les plus relayées d’un compte twitter

Pour connaître les tweets les plus relayés d’un compte twitter il faut utiliser from: devant le pseudo (ex: from:justinbieber) dans la barre de recherche

Si vous voyez une url en bit.ly dans la conversation, on peut savoir combien de clics a génèré ce twitt en copiant-collant l’url et en rajoutant un petit + à la fin. comme ceci :

Si Justin Bieber vous retwitte, votre discussion sera vu par 1,5 millions d’internautes et cliquée par 120 000 personnes… énorme !

4. Rechercher des sites en vogue sur un sujet donnée

Voilà un de mes usages préféré de Topsy ! ex : si je veux chercher des jeux concours immédiats avec peu de participants (pour augmenter mes chances de gain), twitter (encore peu utilisé en France) est donc "the place to be" !

Autrement pour trouver des sites qui buzzent sur un sujet donné, pensez à faire votre recherche en anglais, exemple pour trouver les meilleurs application android pour mon HTC Hero : http://topsy.com/s/best+android+apps?window=a

Cet article Twitter.com : tweeter, twiter, retweet, RT, @, # … C’est quoi twitter ? est apparu en premier sur Les Astuces de Jeanviet.

Facebook – application Facebook Connect pour augmenter les visites de son blog

Jeanviet — Thu, 12 Mar 2009 00:16:09 +0000

Facebook est devenu en l’espace de quelques mois en France le plus gros réseau social en ligne : 7,8 millions de membres (soit près d’un internaute français sur 4). Aujourd’hui je vais vous dévoiler une astuce qui va vous permettre d‘inviter les amis facebook de vos visiteurs à se rendre sur votre blog !

Pour cela, vous devrez créer une application Facebook que vous mettrez sur votre site web et qui communiquera avec l’ensemble du réseau Facebook grâce au système Facebook Connect (en place depuis fin 2008), ça promet !

Au sommaire de ce tuto:

Fonctionnement de l’application Facebook Connect
Créer une application Facebook
Personnaliser l’application pour votre site
Ajouter l’application sur votre site

1/ Fonctionnement de l’application Facebook Connect

Facebook connect permet de connecter la communauté Facebook à votre site web… Les usages sont multiples : authentification, publication, cooptation,… Ici je vous propose de créer un bouton qui permettra à vos visiteurs d’inviter leurs amis Facebook à se rendre sur votre site.

Avant de vous lancer dans le tuto, si vous êtes membre du réseau facebook, je vous invite à tester l’application sur mon site auprès de vos amis. cliquez sur ce bouton facebook et laissez vous guider.

Pas encore sur Facebook ? Regardez cette video pour tout comprendre

Avant d’aller plus loin, je pars du principe que vous possédez un hébergement web avec un accès ftp, et que vous êtes familier avec l’envoi de fichier sur site web via ftp.

2/ Créer une application Facebook

Nous allons maintenant créer une application facebook sur les pages développeurs de facebook.

Logguez vous à votre compte facebook ici:

http://www.facebook.com/login.php

Rendez vous ensuite ici:

http://www.facebook.com/developers/

Cliquez ensuite sur Créer une application

Donnez un nom à votre application -> J’accepte -> Enregistrer les modifications

Ajouter votre url, un descriptif, une icône, un logo et enregistrer les modifications, vous pourrez ensuite récupérer votre clé api à l’écran suivant

Copiez-collez votre clé api, on va bientôt la réutiliser.

3/ Personnaliser l’application pour votre site

Téléchargez ce fichier zip, il contient tous les éléments que vous devrez ajouter à votre blog site / web après personnalisation

facebook.zip

Décompressez le zip dans un répertoire facebook, et ouvrez avec notepad le fichier invite-tes-amis.htm

En bas de page, renseignez votre clé api dans la zone prévu à cet effet (cherchez FB.init):, avant:

Après:

Puis les paramètres de votre site

4/ Ajouter l’application sur votre site

Ajouter dans un même répertoire facebook sur votre site ces 3 fichiers issus du zip:

invite-tes-amis.htm (modifié)
xd_receiver.htm
application-facebook.jpg

Ajoutez ce code dans une page de votre site (remplacez monsite.com par votre domaine.tld):

Envoyez la page modfiée sur votre site via ftp et chargez-la.

En cliquant sur le bouton facebook, on peut maintenant inviter ses amis !

Un exemple d’intégration ici:

http://www.sorbonne-post-scriptum.com

Pour plus d’infos sur les possibilités de Facebook Connect:

http://wiki.developers.facebook.com/index.php/Facebook_Connect

Cet article Facebook – application Facebook Connect pour augmenter les visites de son blog est apparu en premier sur Les Astuces de Jeanviet.

Site Internet gratuit – Créer un site web et un blog facilement avec Weebly

Jeanviet — Fri, 01 Aug 2008 11:57:58 +0000

Vous avez sûrement une passion (cuisine, photo, musique, cinema,…) que vous aimeriez partager avec le plus grand nombre ! Internet est le seul média qui permette à un anonyme de toucher des millions d’internautes issus de tous les pays du globe. Pour partager cette passion avec ces millions de personnes, il faut inévitablement créer un site internet !

Pas mal de freins vous ont empêché jusqu’à aujourd’hui de vous lancer dans l’aventure de la création d’un site web:

connaissances techniques nécessaires,
logiciel de création de sites qui ne fait pas ce que l’on veut,
coût d’un hébergement et d’un achat de nom de domaine, …

Dans ce tuto je vous propose de vous apprendre à créer un site web complet et personnalisé sans connaissances techniques, sans logiciel, sans rien payer, à l’aide du service en ligne Weebly.com !

Au sommaire:

Projet : Créer un site web sur le film Les Affranchis
Créer un compte / site Weebly
Choisir son Design / personnaliser son haut de page
Créer l’arborescence du site (Nouvelle Page, Nouveau Blog)
Ajouter des éléments à chaque page (Texte, Titre, Photo, Video, Liens)
Pour Aller plus loin

Projet: Créer un site Web sur le Film Les Affranchis

Pour illustrer mon projet de création de site, je vais prendre un cas concret : Nous allons créer ensemble un site Internet dédié au film Les Affranchis de Martin Scorsese (site que je ferai évoluer par la suite). Tout ce qu’on verra pour ce thème est bien sûr généralisable à d’autres sujets: site de cuisine, site de musique, site de photo…

Si j’ai choisi Les Affranchis, c’est que je voue un culte absolu à ce film depuis que j’ai 12 ans (j’en ai 26 aujourd’hui), j’ai lu le livre original (Wiseguys) en anglais, vu le film une vingtaine de fois, acheté la BO et ai assisté à une projection en salle lorsque le centre Pompidou faisait une rétrospective des films de Scorsese (2005 / 2006).

Comme dans tout projet web, il faut en amont définir un mini cahier des charges / axes de positionnement (infos qui nous aideront à faire les bons choix ensuite), le voici:

Titre du site: Les Affranchis – le meilleur film de gangsters
Description: Videos, photos, articles, musiques, extraits sonores autour du Film Les Affranchis de Martin Scrosese
Cible: Cinéphiles, fans de films de Scorsese, fans de films de gangster
Arborescence du site : menu horizontal donnant accès aux rubriques suivantes: accueil, blog, photos, videos, musiques, ressources, livre d’or, contact
Couleurs dominantes: noir, rouge, gris
Medias et ressources externes : photos, videos (dailymotion, youtube) , musique (deezer), script js kit livre d’or

Créer un compte / site Weebly

Rendez-vous sur le site www.weebly.com, dans l’encart Sign Up Now (inscrivez-vous maintenant), rentrez un pseudo, mot de passe, email, cochez la case I accept et cliquez sur le bouton Sign Up & start creating

Ensuite, pour confirmer, écrivez les 2 messages qui s’affichent dans la barre de Captcha (chez moi: wittman 371,101)

Donnez un nom à votre nouveau site et cliquez sur continue, prenez un truc pas trop long car ça sera ajouté en préfixe de votre adresse web… Donc pour moi: http://affranchis.weebly.com

Vous devriez ensuite atterrir sur cette page (j’ai numéroté les 4 étapes clés de la phase de création)

NB: si vous voulez juste tester le service avant de vous inscrire, c’est possible ici: http://www.weebly.com/weebly/main.php

Choisir son Design / personnaliser son haut de page

On va enfin commencer à créer !! Allez dans l’onglet Designs, survolez les différents designs et choisissez celui qui vous convient le mieux

Sachant que quand vous avez un design avec image, vous pouvez y coller votre propre image…. Pour ma part, j’ai choisi ce design avec image:

Maintenant que le design est choisi, on va pouvoir personnaliser l’image de fond et le titre du haut de page, on changera le "Home" à droite par "Accueil" quand on sera dans la partie création de pages.

Pour changer le titre, cliquez dessus et tapez ce que vous souhaitez au clavier… c’est aussi simple que ça !

Ensuite on va changer l’image de fond du haut de page qui est un peu trop funky à mon goût. Pareil on clique dessus d’abord, apparaît alors une barre horinontale sur le dessus: la header barre options

Cette Header (haut de page) Options barre nous indique que l’image actuelle fait 680 pixels de largeur sur 175 pixles de hauteur. Si on veut la changer il faut donc respecter ces dimensions.

Utilisez paint, photofiltre, ou tout autre outil d’édition d’image pour vous caler sur les dimensions qui sont affichées dans la Header Options barre… Quand votre image est prête sur votre pc, vous pouvez appuyer sur Upload pour aller la chercher.

Une fois l’image sélectionnée, faîtes ouvrir… et vous aurez alors un haut de page qui a de la gueule !

Nous venons de terminer le design de notre site, créons maintenant les différentes rubriques.

Créer l’arborescence du site

On reliste les éléments que l’on avait défini dans notre mini cahier des charges à savoir:

accueil
blog
photos
videos
musiques
ressources
livre d’or
contact

Et on va les insérer depuis la zone Pages, quand c’est du contenu blog on clique sur New Blog, quand c’est une page moins complexe (New Page)

On va d’abord renommer la page existante "Home" en "Accueil" comme ceci :

Puis on appuie sur save:

En route pour la création d’autres pages, créons d’abord le blog, je clique sur New Blog (1) puis je rentre Blog à la place de de New Page et j’appuie sur le bouton Save

NB: on n’est pas obligé d’appeler cela blog, vous pouvez donner le nom que vous souhaitez (tuto, news, …), vous aurez remarqué que je me sers d’un blog pour diffuser mes tutos, je trouve ça plus confortable comme mode d’édition.

Quand l’entrée blog est ajoutée, on nous renvoie sur la page d’accueil, les liens du menu horizontal sont maintenant: Accueil, Blog (on avait seulement home avant)

Si vous cliquez sur Blog, vous remarquerez que Weebly vous a créé la présentation typique d’un blog : accès aux rubriques sur la droite, articles au centre classés du plus récent au plus ancien. On verra comment interagir avec tout ça un peu plus tard.

On va ajouter les autres pages en retournant dans la rubrique Pages, et en cliquant à chaque fois sur New Page + ajout du nom de la page

On cliquera sur Save, une fois toutes les pages ajoutées, pour éviter de faire des va et vient permanents…. Et voilà l’arborescence finalisée (NB: on peut changer l’ordre des pages / blogs en glissant déposant les liens vers le haut ou le bas)

Et voici ce que ça donne concrètement sur notre site web… ça commence à le faire, non ?

Après le design et l’arborescence, il faut s’attaquer maintenant au contenu !

Ajouter des éléments de contenu à chaque page

Les rubriques que nous venons de créer vont être un prétexte pour s’exercer à l’ajout de différents types d’éléments de contenu :

Dans accueil, je vais vous montrer comment ajouter du texte, des titres, faire des liens vers les rubriques, positionner le contenu sur 2 colonnes
Dans blog, je vais vous montrer comment publier un article (avec ajout de video, musique) et personnaliser la side bar
Dans livre d’or, un script externe contenu dans le module HTML
Dans contact, un forumaire de contact et un lien externe vers jeanviet.info

Tout va se passer dans la zone Elements, cliquez sur cet onglet

Accueil: ajouter texte, titre, liens internes, sur 2 colonnes

Rendez-vous maintenant sur votre page d’accueil (en cliquant sur accueil dans le menu horizontal), nous allons y ajouter des éléments, le principe est le même pour toutes les pages : on glisse et dépose les items du haut dans le coeur de page…

Ceux qui sont habitués aux hp personnalisables connaissent bien ce mouvement, qu’on utilise aussi pour déplacer un fichier sur le bureau.

On va d’abord ajouter un titre de bienvenu, on glisse et dépose le bouton Title Text dans le coeur de page

Puis on clique sur la zone de titre qui apparaît, et on ajoute son texte. Quand vous cliquez sur la zone de texte, une barre d’édition apparaît, elle vous permet de personnaliser la couleur du titre, la taille de police, l’alignement,…

Avant d’écrire mon titre, j’ai réduis la police d’un cran (clic sur "-"), mis la couleur rouge, et ai centré le titre

Pour ajouter un texte, c’est le même principe sauf qu’on glisse et dépose l’élément Paragraph, j’ai ajouté cette zone de texte sous le titre

Vous devinez peut-être mon idée, je vais créer un bloc de 4 images qui donne accès aux news, photo, video, musique… Pour cela je vais créer un tableau à 4 cellules en bidouillant avec le bouton 2 column layout qui divise la zone en 2

Le mieux, c’est que je vous montre la manip exacte en video, la voici:

Au final vous devriez avoir un tableau invisible 4 colonnes, une ligne, comme ceci:

Maintenant on va ajouter dans chaque bloc, une image cliquable qui renvoit vers la bonne rubrique, je vais expliquer les manipulations complètes pour un seul ajout d’image (il faudra répéter ces consignes pour les 3 autres images).

On glisse et dépose Picture dans la première cellule de notre tableau, comme ceci

On clique sur Click Here to Edit pour importer une photo depuis notre pc

Elle apparaît ensuite dans le bloc, on la redimensionne avec la souris pour qu’elle soit adaptée au bloc

On va définir un lien depuis la toolbar qui est apparue en haut (l’image doit être sélectionnée), en cliquant sur Set Link

On va dans Your Pages (1), pour créer un lien interne, on choisit la rubrique Blog depuis le lien déroulant (2), on clique sur Save.

On répètera cette même manip, pour les 3 autres blocs qui pointent vers photos, video, musique.

Après tous ces efforts, vous voulez peut-être voir ce que cela rend sans les marqueurs de zone, cliquez alors sur Publish (en haut à droite)

La première fois, on vous sert cette fenêtre, qui vous demande de confirmer le choix du sous domaine (affranchis.weebly.com)

Ensuite, toutes les autres fois, vous aurez le droit à la confirmation de publication

Voilà finalement à quoi ressemble ma page d’accueil, après l’ajout d’un texte avec titre et paragraphe sous mes 4 images cliquables. Pas mal, non ?

Allez ! On continue sur notre lancée pour la création d’un article de blog !

Blog: ajouter un article, personnaliser la barre de droite

Si vous êtes familier avec une plateforme de blog, vous allez trouver l’ajout d’articles et les options de personnalisation ultra simples !

On clique sur Blog depuis le menu du haut pour se retrouver face à notre blog.

Sur le blog, vous avez 3 / 4 possibiltés:

Publier un nouvel article en cliquant sur New Post
Modifier (edit) ou supprimer (delete) un article en cours
Ajouter un gadget dans la sidebar (menu à droite) ou personnaliser les blocs en les sélectionnant à la souris et en les éditant au clavier

On peut tout suite changer le bloc auteur ainsi:

Maintenant concentrons nous sur la publication d’un article avec photo et video / musique ! On va repartir sur de bonnes bases, on efface l’article affiché par défaut (delete) et on clique sur New Post… Voici ce qu’on a alors à l’écran:

Dans la zone 1, on va mettre le titre de notre article (ex: bienvenue sur le blog des affranchis)
Dans la zone 2, on va pouvoir ajouter du texte, au dessus et en dessous une video ou une photo
Dans la zone 3, il faudra classer l’article dans une ou plusieurs catégories (séparées par des virgules si plus d’1 categorie)

Le plus simple pour ajouter des videos ou des musiques consiste à récupérer du code HTML issu d’un site de partage / streaming et de le coller dans le module Custom HTML

On glisse et dépose Custom HTML (dans Elements -> More) sous ou au dessus du bloc article, on clique dessus pour activer la toolbar custom HTML, on clique sur Edit Custom HTML

A ce moment là, on a un bloc prêt à accueillir tout type de code HTML

On peut y mettre un lecteur exportable Dailymotion ou une playliste deezer…. En ajoutant ça

J’ai le droit à ça:

Maintenant que mon article est fini, je peux cliquer sur Publish Live, puis sur Publish tout en haut à droite pour avoir le rendu fidèle de mon blog sur un navigateur !

C’est pas mal du tout ! j’ai réussi à coller une image, une playliste deezer, une video dailymotion, et le site n’a pas bronché ! chose impossible sur un skyblog (les playlistes deezer sont rejetées)…. Comme ça faisait un peu surchargé, je n’ai gardé au final que la video dailymotion (la playliste deezer a été mis dans musique)

Livre d’or: script javascript JS Kit contenu dans un module HTML

On va maintenant insérer un livre d’or externe dans la rubrique Livre d’or…. On va encore avoir recours au module Custom HTML

On glisse et dépose Custom HTML dans le coeur de page du livre d’or, on clique dessus pour activer la toolbar custom HTML, on clique sur Edit Custom HTML

A ce moment là, on a un bloc prêt à accueillir tout type de code HTML

On va y coller ce petit bout de code issu de JS Kit, ça va permettre à nos lecteurs de noter notre site et de laisser un commentaire:

Voici ce que ça donne dès que quelqu’un publie un commentaire

Créer un formulaire de contact + lien vers un site Internet

On va aller dans la rubrique contact, et on va glisser et déposer Contact Form (que l’on retrouve dans Elements -> More) dans le coeur de page

Reste ensuite à donner un titre au formulaire (Ex remplissez ce formulaire)

Ensuite, je vais ajouter un lien texte vers mon site. Je glisse et dépose alors un bloc Paragraph sous le formulaire, tape un texte et surligne avec ma souris le texte sur lequel je veux faire un lien, je clique ensuite sur le bouton lien ci-dessous présent dans la toolbar:

On clique sur l’onglet Website, comme c’est un lien externe, et on entre l’adresse à droite, puis on clique sur Save.

On publie le site, et on va regarder le rendu sur la page Contact

Pour aller plus loin

Maintenant que votre site est créé, il faut le faire connaître (obtenir des liens d’autres sites) pour que les moteurs de recherche l’indexent et que les internautes vous retrouvent ! Pour ceux qui le souhaitent, vous pouvez ajouter le nom de votre site weebly ainsi que son url (adresse http:// en weebly.com) dans le texte des commentaires de ce blog (je ferai en sorte que les moteurs suivent votre lien et indexent votre site).

Vous pouvez aussi ajouté un code de suivi stats dans Settings -> SEO -> Footer Code pour savoir combien d’internautes se rendent sur votre site… Pour ceux qui débutent, je vous recommande Get Clicky comme 1er outil de suivi de trafic gratuit.

Voilà, vous venez de créer en seulement quelques heures un premier site web avec un design agréable, sans pub, sans rien payer… Vous allez pouvoir maintenant jouer les "Jeanviet" en publiant vos conseils cuisine, montage, pc, image fashion, déco,…

Cet article Site Internet gratuit – Créer un site web et un blog facilement avec Weebly est apparu en premier sur Les Astuces de Jeanviet.

Mettre video sur blog ou site web avec générateur html pour wmv, flv, divx

Jeanviet — Sat, 19 Apr 2008 21:18:50 +0000

Nous allons apprendre ensemble à insérer une video dans un blog ou un site perso (comme ce que j’ai fait ci-dessus) sans passer par une plateforme de partage de video ! Pour cela, nous devrons:

Héberger la video sur un site de création de page perso
Générer un code html video à partir de l’emplacement web de la video
Copier-coller le code html dans une page web du site perso

L’avantage de faire tout soi-même sans passer par voila video, vimeo, youtube ou dailymotion:

pas de dégradation d’image
possibilité de diffuser sa video instantanément
maîtrise totale de la diffusion de sa video

La formule est particulièrement intéressante si vous souhaitez projeter en ligne un montage video réalisé avec windows movie maker ou un diaporama photo avec musique (comme ci-dessus) à un cercle restreint de contacts: amis ou membres de votre famille.

Pour une diffusion plus large (problématique de bande passante limitée sur les espaces perso), préférez les sites de partage de video moins flexibles mais plus économiques !

Les 3 générateurs de code html pour video streamée:

Embeded Media Html Generator (avi, wmv, quicktime, swf, real media)
Divx code Generator (divx)
Générateur de player FLV (flv)

vont nous premettre de gérer de multiples formats video:

fichier avi, fichier wmv, fichier mov, fichier swf, fichier rm, fichier divx, fichier flv

Héberger une video sur internet

Pour ajouter une video sur un site web, il faut d’abord l’héberger sur un espace perso en ligne, nous allons utiliser Google Page Creator (service gratuit de création de page perso limité à 100 mo d’espace).

Créez vous un compte google, et rendez vous sur la page d’administration de votre site (site manager)… Dans la zone dédiée à l’envoi de fichier (en bas à droite), cliquez sur upload, puis sur Parcourir pour aller chercher votre fichier video.

Quand la video est arrivée sur google page creator, elle apparaît en bas de liste:

Il ne nous reste plus qu’à récupérer son adresse sur le web (clic droit sur le lien en bleu + copier l’adresse du lien), et à la coller dans le bloc note (ou word) en attendant.

http://jeanviet.googlepages.com/newyork.wmv

Notre video est maintenant hébergé sur le web !! Mais nous ne pouvons pas tout de suite mettre cette video sur un blog, il faut encore lui ajouter quelques paramètres html (étape suivante ;-))

Générer un code html pour video

Une fois la video hébergée, il faut l’encapsuler dans un player web… nous allons donc utiliser un des 3 générateurs de code html pour video vu plus haut. je vous propose de tester ensemble la génération de code html pour:

video au format wmv
video au format divx
video au format flv

En partant du principe que vous avez hébergé votre video sur un site web au préalable.

Générer un player wmv avec embeded media html generator

Rendez vous sur Embeded Media HTML generator, cliquez sur Windows Media

Ensuite nous allons entrer les informations liées à notre video:

Server: racine d’url de votre hébergement web, ex: http://jeanviet.googlepages.com
File path: répertoire web + nom de votre video (pas de répertoire pour moi): newyork.wmv
width = largeur, height = hauteur (ajuster si besoin)
start automatcally à mettre sur no
alignment sur center

Quand c’est paramétré, on appuie sur submit, et on a possiblité de copier le code html qu’il faut insérer sur sont site web.

Copiez tout ce qui se situe après jusqu’à (inclus) : sélectionnez toute cette zone avec votre souris (elle sera alors bleutée) et appuyez ensuite sur Ctrl + C…. Collez le tout ensuite dans un bloc note (word, wordpad) avec les touches Ctrl + V, en attendant d’avoir accès à notre site web.

Si vous voulez voir le rendu, vous pouvez aussi cliquer sur TEST MEDIA

Votre video wmv se lance ainsi dans une nouvelle fenêtre

Générer un player divx avec Divx code generator

Rendez vous sur Divx code generator, et paramétrez le générateur comme suit:

url complète de votre divx, ex: http://jeanviet.googlepages.com/1366277.divx
width = largeur, height = longueur, ajuster au besoin
Video thumbnail, si vous avez une image d’aperçu hébergé sur un site web, vous pouvez insérer son url ici
je laisse auto-start décoché

Cliquez ensuite sur Generate

Quand c’est généré, rendez-vous dans la zone dédiée au code sous le bouton Preview.

Copiez tout ce qui se situe dans le bloc: sélectionnez toute cette zone avec votre souris (elle sera alors bleutée) et appuyez ensuite sur Ctrl + C…

Collez le tout ensuite dans un bloc note (word, wordpad) avec les touches Ctrl + V, en attendant d’avoir accès à votre site web.

Si vous voulez voir le rendu, vous pouvez aussi cliquer sur Preview

Votre video divx se lance ainsi dans une nouvelle fenêtre

Générer un player flv avec embeded media html generator

Ici avant toutes choses, il faut que vous installiez dans le même répertoire que votre video flv, les 3 fichiers suivants:

Si comme moi, vous utilisez google page creator, il suffit simplement d’ajouter ces 3 fichiers – 1 fois pour toutes – (au même titre que la video flv) dans la zone Uploaded Stuff (revoir manip plus haut)

Une fois que c’est fait rendez vous sur le générateur de player FLV, et paramétrez les options comme suit:

FLV file absolute URL: emplacement web de votre flv, ex: http://jeanviet.googlepages.com/EE4F127F.flv
width = largeur, height = hauteur (ajuster si besoin)
autostart décoché
Podcast download link décoché

Quand c’est paramétré, on appuie sur Generate Code.

Copiez tout ce qui se situe entre

Ce code javascript permet de rendre dynamique (car liens susceptibles de changer) le 1er code HTML qu’on a vu plus haut… mais en dernier ressort le navigateur interprètera le code HTML vu plus haut (Ceci est valable pour les javascripts qui t’ont été donnés par des services tel que del.icio.us, blinkbits, wishlistr)… c’est donc sur ce code HTML qu’il faut se concentrer pour paramétrer une mise en forme relative aux balises HTML rencontrées.

2/ Créer une syntaxe HTML et CSS pour chaque bloc de liens

En plus d’afficher des liens, il faudrait ajouter un titre (balise h2) à notre liste et une structure de « bloc » (balise div) à notre titre pour qu’on puisse après définir des propriétés sur l’ensemble du bloc.

Traduction HTML:


Ma liste de liens

Lien 1 qui renvoie vers page 1
Lien 2 qui renvoie vers page 2
Lien 3 qui renvoie vers page 3
Lien 4 qui renvoie vers page 4
Lien 5 qui renvoie vers page 5

On a donc 3 lignes à rajouter au javascipt qu’on nous a donné (2 lignes avant + 1 ligne après)

code html/javascipt à insérer:


Ma liste de liens

Ce qui donnera ça sur ton navigateur:

Ma liste de liens

Pour rendre cela plus beau visuellement, il faut créer des styles CSS pour chaque balise html vu plus haut. J’ai préparé un code qui s’adapte aux 3 cas concrets que je vais t’expliquer après.

Toute la difficulté est de savoir ou insérer le code, sous Blogger, c’est ici: Modèle -> Modifier le code HTML (dans les balises head et au sein de la balise style)

Si ce n’est pas clair, regarde où se situe le texte bloc1 dans le code source de cette page

Sous WordPress, c’est ici Presentation -> Theme Editor et il faut ajouter le code dans la feuille style.css

Voici le code CSS à insérer pour un bloc nommé « bloc1″

(avec /* commentaire explicatif */ dans le code)

/*bloc1*/
#bloc1 {
border: 1px solid #9FC1FB;
width:194px;
display:block;
background-color:#F4f4f4;
margin-left: 0;
padding-left: 0;
}

/* bordure bleu ciel pour ton bloc (#9FC1FB),
 largeur de 194  */

#bloc1 br{
display:none;
}
/* si tu vois un saut de ligne, 
tu ne l'affiches pas  */
#bloc1 p{
display:none;
}
/* si tu vois un paragraphe, 
tu ne l'affiches pas, ça efface la pub */

#bloc1 h2{
color:#fff;
background-color:#9FC1FB;
width:194px;
margin:0;
padding:0;
font-size:1.2em;
text-align:center;
font-weight: normal;
}

/* titre sous fond bleu (#9FC1FB), 
police blanche (#fff) de taille 1.2 et centré  */

#bloc1 ul {
padding-left: 0;
margin-left:0px;
margin-bottom:3px;
margin-top:3px;
}

/* quelques règles d'aération  */

#bloc1 ul li {
list-style-type:none;
padding: 1px 0;
margin-left: 4px;
border-bottom: 1px solid #EBEBEB;
width:186px;
}

/* n'affiche pas les bullets points  */
/* un trait horizontal de séparation entre chaque lien  */

#bloc1 ul li a {
width:186px;
display:block;
color: #000;
text-decoration:none;
-moz-border-radius: 4px;
font-size:1em;
}

/* lien hypertexte non souligné  */

#bloc1 ul li a:hover {
background-color:#ffe566;
color:#ff6600;
font-size:1em;
}

/* lien hypertexte surligné en jaune au survol  */

/*bloc1*/
/*Dans les deux zones que j'ai mis en rouge, 
vous pouvez paramétrer la couleur de votre bloc
en indiquant un code couleur HTML RVB*/

Voici ce que ça donne avec le code html/javascript + la mise en forme CSS définie au-dessus:

Ma liste de liens

Pas mal, non ? Maintenant que nous avons les bases, nous allons pouvoir répéter cette manip avec toutes nos listes

Rappel de la méthode

On colle le javascript où l’on veut qu’il apparaisse
On le fait précéder d’un titre (balise h2),
puis on englobe le tout dans un bloc (div avec un id différent -bloc1 dans l’ex)
Et on définit les propriétés du bloc dans notre code css

Nous allons voir maintenant comment il est possible de se servir de cette méthode pour 3 types de listes, nous donnerons à chaque fois un nom différent à nos blocs de listes: bloc1 (pour del.icio.us), bloc2 (pour blinkbits), bloc3 (pour wishlistr)… Et une couleur différente pour chaque bloc… Pour trouver les codes couleurs RVB que tu inséreras dans ton CSS, utilise ColorPic et ensuite change la suite de 6 caractères précédé de # (que j’ai mis en rouge dans le CSS) par le code couleur que t’aura donné ColorPic.

3/ Personnaliser une liste de liens del.icio.us

Avec del.icio.us, on peut partager ses articles favoris avec le reste des utilsateurs du service, chaque fois qu’un article nous intéresse, on l’ajoute à notre liste del.icio.us, et chacun peut voir en temps réel ce que nous avons ajouté

Je te propose d’aller plus loin en partageant tes 5 derniers articles enregistrés avec les visiteurs de ton blog !

Pour créer ta linkroll, rend toi ici

Il faut que tu soit loggé (identifié) dans del.icio.us, paramètre ta linkroll comme ci-dessous

Tout ce que tu peux désactiver, tu désactives (pas de titre, pas de bullet points, pas d’icônes)

Le Résultat (à droite)

Le code javascript à copier sur ton blog (en haut)

Voici ce que ça doit donner sur ton blog (c’est exactement les mêmes réglages qu’on avait vu plus haut)

Ma liste de liens

4/ Personnaliser une liste de liens blinkbits

Plus besoin d’installer MagPie RSS, pour diffuser des flux rss sur son site ! Le RSS feed Builder de Blinkbits génère un javascript qu’on a pu qu’à copier-coller dans la liste de liens de son blog. Cet outil me permet d’afficher à droite les dernières discussions du forum… et sans faire référence à Blinkbits ! ceci grâce à notre CSS qui dit de ne pas afficher les paragraphes dans les blocs de lien (c’est dans la balise p que Blinkbits fait sa pub, et là on l’a mis à display:none (ne pas afficher en français))

Rendez-vous sur le RSS feed Builder de Blinkbits avec un flux rss à ajouter (il faut s’inscrire à blinkbits et être loggé)

Essayons avec le flux rss de Tech Bee: http://techbee.wordpress.com/feed/

Voici les réglages

Même logique que pour del.icio.us, on désactive tout ce qu’on peut: titre, description, date, et on dit combien d’articles on veut afficher (ici 5), après si comme moi tu veux encoder ton texte en UTF-8 (WordPress, Blogger), coche bien cette case (important pour les accents), sinon ce n’est pas nécessaire (les plateformes de blog françaises utilisent des charactères en iso-8859-1)

Appuie ensuite sur Generate Javascript

Et copie-colle le texte qui s’affiche dans ta linkroll

Voici ce que ça doit donner sur ton blog (c’est rouge maintenant, j’ai remplacé la couleur #9FC1FB par la couleur #cc0000 dans le CSS)

Tech Bee

5/ Personnaliser une liste de liens wishlistr

Wishlistr est un service web qui te permet de partager en ligne la liste des objets que tu souhaiterais avoir (pour qu’on te les offre ;-)). Il y a quelques mois, le PDG de wishlistr (qui s’y connaît en HTML/CSS) m’avait aidé à diffuser ma liste de cadeaux dans ma rubrique favoris. A mon tour de t’expliquer comment il faut faire en français.

Rends toi sur l’outil de création de linkroll (tu dois être identifié d’abord)

Ici je désactive les infos additionnelles (pour garder ma structure en ul li dans le CSS)

Appuie ensuite sur Create Linkroll

Et copie-colle le texte qui s’affiche dans ta linkroll

Voici ce que ça doit donner sur ton blog

Ma WishList

6/ Aller plus loin dans la personnalisation

Dans ce tuto je t’ai proposé des mises en formes à la sauce Jeanviet, tu peux peut-être avoir envie de supprimer les bordures, d’avoir un design plus arrondi, de ne pas avoir de surlignage au survol des liens,…

J’ai donc 3 options pour toi:

1. Apprends l’HTML/CSS sur le site du zéro et / ou sur le site d’Alsacréations

2. Consulte des exemples de listes sur le site de Max Design

3. Pose ta question dans le Forum Création de Blogs / Sites Web

Cet article Tes listes de liens méritent une meilleure mise en forme est apparu en premier sur Les Astuces de Jeanviet.

A quoi servent les flux rss et comment les consulter facilement ?

Jeanviet — Tue, 03 Oct 2006 23:02:58 +0000

Au sommaire de cette astuce:

A quoi servent les flux rss ?
Pourquoi les flux rss sont-ils si peu utilisés ?
Un seul navigateur, plusieurs lecteurs
Consulter des flux rss avec netvibes et firefox 2.0
Consulter des flux rss avec google reader et firefox 2.0

1/ A quoi servent les flux rss ?

RSS (really simple syndication en anglais), qui signifie abonnement vraiment simple en français, est un système qui permet à un site web de partager facilement ses contenus. En possession de l’adresse web du flux rss (http://feeds.feedburner.com/LesAstucesDeJeanviet pour les astuces de jeanviet), on peut consulter quotidiennement les principaux titres du site sans jamais être contraint de se rendre sur le site.

S’abonner à un flux rss prend tout son sens si on s’abonne à plusieurs flux… Pour se faire vous devez posséder un lecteur de flux rss, et après, ça se passe comme avec une boîte mail, c’est comme si vous disiez à vos sites préférés de vous envoyez un mail chaque fois qu’une info nouvelle est publiée sur leur site. Les avantage par rapport aux mailings et autres newsletters sont nombreux:

à tout moment on peut se désinscire,
on ne donne jamais notre adresse email,
les contenus auxquels nous avons souscrits sont forcément de qualité (puisque nous les avons choisis),
à l’ouverture du « mail » (clic sur le lien issu du flux rss), impossible d’être contaminé par un virus informatique.

Les flux rss permettent donc de suivre tout type d’actualité quotidiennement depuis un seul endroit: on ouvre un seul lecteur de flux rss qui nous évite d’aller visiter 15 sites ! Chaque jour sont affichés pour chaque site auquel on s’est abonné les 10 derniers articles publiés, libre à nous de cliquer sur un article quand celui-ci nous intéresse.

2/ Pourquoi les flux rss sont-ils si peu utilisés ?

Comme chaque internaute qui se respecte, vous cliquez chaque fois que vous voyez un lien… Le net c’est aussi simple que que ça…. Et que se passe-t-il quand vous cliquez sur un lien rss brute, l’image de gauche apparaît… Alors forcément vous avez du mal à comprendre ! Pendant longtemps il fallait copier le lien rss brute (clic droit + copier l’adresse du lien) dans le presse papier de l’ordinateur et le coller ensuite dans son lecteur de flux rss pour pouvoir le lire.

Heureusement pour nous cette manoeuvre appartient maintenant au passé… Téléchargez le nouveau Firefox 2.0 (qui remplacera votre vieil Internet Explorer complètement dépassé) et vous verrez comme c’est simple de s’abonner à un flux rss (fini l’image de gauche, 2 clics suffisent pour s’abonner à un flux).

Autrement quand vous voyez les terme « abonnez-vous », n’ayez pas peur ! c’est gratuit !

Si vous pensez également que RSS est un truc super compliqué réservé aux pros de l’informatique, consultez ma vidéo, vous verrez qu’il ne faut pas plus de 5 minutes pour se brancher à plusieurs flux.

Les flux rss ne sont pas seulement réservés aux blogs et aux sites d’actualités… vous pouvez vous en servir pour vous abonner gratuitement à des émissions de radio, de télé, à des flux vidéos (Youtube, Dailymotion, Google Vidéo), à des albums photos (Flickr, Picasa Web Albums).

3/ Un seul navigateur, plusieurs lecteurs

Comme vous l’aurez compris, pour s’abonner facilement à un flux rss, il vous faut le nouveau Firefox 2.0 (MAJ du 12/02/2007: Internet Explorer 7 est pas mal non plus ;-))… Pourquoi est-il si simple ? Quand il détecte un flux rss dans une page, il le signale près du lien dans la barre d’adresse en montrant un petit logo orange… Vous n’avez plus qu’à cliquer sur ce lien et à indiquer quel lecteur vous utilisez, et firefox 2.0 se charge du reste.

A chacun son lecteur:

Si vous démarrez dans la lecture de flux rss, je vous conseille netvibes, voir l’astuce plus bas
Si vous êtes un afficionado de outlook, et que vous souhaitez recevoir vos flux rss comme vous recevez vos mail, je vous conseille thunderbird
Si vous êtes un habitué des flux rss, je vous conseille google reader (la nouvelle version est vraiment top!), voir la vidéo plus bas

4/ Consulter des flux rss avec netvibes et firefox 2.0

Télécharger firefox 2.0 (disponible ici) et rendez vous sur la page netvibes.com… Netvibes est une page d’accueil entièrement personnalisable: vous y mettez ce que vous voulez: flux rss, moteur de recherche, gadget , boîte mail,… Vous pouvez y accédez où que vous soyez, chaque fois que vous la personnaliser, les changements sont enregistrés automatiquement.

Rendez-vous sur la page netvibes, ouvrez un compte en cliquant sur « Connexion » (situé en haut à droite)

Cliquez ensuite sur enregistrez-vous maintenant !

Rentrez votre adresse email et inventez un mot de passe, comme ci-dessous

Appuyez sur « M’enregistrer », et le tour est pratiquement joué

Fermez ensuite la fenêtre « Nouvel Utilisateur » qui apparaît, en cliquant sur la croix en haut à droite (comme ci-dessous):

Votre compte est créé, surfez sur le web avec votre firefox 2.0, tapez astuces.jeanviet.info dans votre barre d’adresse

Un logo rss apparaît sur la droite de l’adresse web, cliquez dessus, la page suivante apparaît alors:

Paramétrez la page comme ci-dessus et cliquez sur « S’abonner maintenant », cochez « Toujours utiliser Netvibes » Pour ne plus avoir à le paramétrer

A l’invite « You are about to add… », dites OK pour ajouter le flux à votre lecteur netvibes…. Et le tour est joué:

Vous êtes maintenant abonné aux astuces de jeanviet !

5/ Consulter des flux rss avec google reader et firefox 2.0

Cet article A quoi servent les flux rss et comment les consulter facilement ? est apparu en premier sur Les Astuces de Jeanviet.

WordPress, autoriser l’insertion d’images dans les commentaires

Jeanviet — Wed, 23 Aug 2006 22:37:57 +0000

Si je me suis senti obligé de créer une astuce là-dessus (autoriser l’insertion d’images dans les commentaires sous wordpress), c’est que je me suis senti quelque peu embrouillé par le support technique de wordpress, ce support m’a quand même aidé, mais j’ai dû m’y reprendre à plusieurs fois avant d’y arriver. J’espère qu’avec cette astuce, vous pourrez autoriser l’insertion d’images dans vos commentaires sans trop de problèmes.

La manipulation consiste a télécharger le fichier kses.php, à l’ouvrir avec le bloc notes, et à y ajouter une ligne de code. Cette ligne de code autorise l’insertion de la balise img et ses attributs dans la zone de commentaires. Pour info, en HTML, la balise img sert à insérer une image. Télécharger donc ce fichier (kses.php) avec votre client FTP préféré. Il se trouve dans le dossier wp-includes de votre installation wordpress.

Ouvrez-le avec le bloc notes (wordpad) , et recherchez la ligne $allowedtags (Ctrl+F, rechercher $allowedtags)

entre :

$allowedtags = array (‘a’ => array (‘href’ => array (), ‘title’ => array ()), ‘abbr’ => array (‘title’ => array ()), ‘acronym’ => array (‘title’ => array ()), ‘b’ => array (), ‘blockquote’ => array (‘cite’ => array ()),

// ‘br’ => array(),

insérez cette ligne de code:
‘img’ => array (‘src’ => array(), ‘alt’ => array(), ‘height’ => array(), ‘width’ => array(), ‘align’ => array()),

Voici donc ce que cela donne sur notre bloc notes:

Une fois que c’est bon, enregistrez à nouveau le fichier (Ctrl+S), et remettez-le à son emplacement d’origine avec votre client FTP préféré

Les images peuvent maintenant être inséré dans les commentaires par tout lecteur de votre blog. Pour expliquer à votre lecteur comment il faut faire, voici un lien qui peut vous être utile: héberger des images gratuitement sur le web

Cet article WordPress, autoriser l’insertion d’images dans les commentaires est apparu en premier sur Les Astuces de Jeanviet.