Si tu as plus de 30 ans, que tu bosses depuis plus de 10 ans sur Internet et que tu n’as toujours pas de CV en ligne optimisé mobile, avec ton propre nom de domaine, et n°1 sur Google sur ton prénom et nom, c’est que tu as raté ta transformation digitale  Je vais t’aider à rectifier le tir grâce à ce tutoriel.

Au sommaire :

1. Pré-requis
2. Acheter un nom de domaine chez OVH
3. Téléchargez le thème CeeVee de Styleshout
4. Editer le thème CeeVee avec BlueGriffon
5. Uploadez votre thème sur votre FTP
6. Référencez votre CV en ligne sur Google

Pré-requis

Dans ce tutoriel, je vais vous aider à créer un site web responsive et parallax avec votre propre nom de domaine. Tous les outils et ressources sont gratuits, vous aurez juste à payer le nom de domaine (~ 5 € / an).

Les logiciels et ressources à télécharger :

• Thème Ceevee de styleshout pour la mise en page
• BlueGriffon pour éditer le CV HTML
• Cyberduck pour publier le CV en ligne via FTP

Comme c’est un site vitrine, il vous suffit de prendre un nom de domaine chez OVH et de vous contenter de leur offre d’hébergement gratuite de 10 mo (Start 10M).

Acheter un nom de domaine chez OVH

OVH propose depuis quelques mois des noms de domaine en .ovh à des prix très attractifs : 1,20 € la première année, 3,60 € / an ensuite. Je vous conseille de prendre cette offre avec un nom de domaine à votre prénom et nom (prenom-nom.ovh) ou centré sur votre activité (activite.ovh).

J’ai, pour ma part, réservé il y a quelques mois le nom de domaine ebook.ovh. Une fois le domaine acheté, connectez-vous au manager OVH et cliquez sur Activer mon Start 10M. OVH vous enverra ensuite vos identifiants FTP qui vous permettront de publier votre site plus tard.

Téléchargez le thème Ceevee de Styleshout

Pas besoin d’avoir des compétences en Photoshop, HTML5, CSS3, pour créer un CV web responsive, il suffit de récupérer un zip gratuit qui contient tous les éléments sur le site Styleshout  : Thème Ceevee.

Une fois téléchargé, décompressez le Zip, dans un répertoire site web sur votre bureau comme ceci :

Dans le répertoire images, vous pourrez personnaliser votre fond, votre image de profil et les visuels de vos projets (dossier portfolio).

Pour modifier les visuels, ouvrez les originaux, éditez-les dans The Gimp ou Photofiltre et enregistrer-les ensuite.

Ouvrez également le fichier sendEmail.php (depuis un bloc notes) se trouvant dans le répertoire Inc et ajoutez votre email dans la 4ère ligne à la place de user@website.com pour recevoir plus tard les messages du formulaire.

$siteOwnersEmail = ‘user@website.com';

Editer le thème Ceevee avec BlueGriffon

BlueGriffon est un éditeur HTML WYSISWYG (what you see is what you get) qui permet aux novices en matière de code HTML  de modifier le texte d’une mise en page de site sans avoir à plonger dans le code.

J’ai réalisé une longue vidéo (15 minutes) des quelques éléments que vous aurez à modifier dans le fichier index.html du template Ceevee.

J’en ai profité pour rappeler l’importance d’un point de vue référencement naturel d’optimiser les balises Title et description de votre page HTML (ne gardez pas ce qu’a mis Ceevee).

NB : Je suis pour ma part plus productif en passant directement par un éditeur de texte de type NotePad++ et en jonglant de temps en temps avec Chrome pour avoir le rendu.

Uploadez votre thème sur votre FTP avec Cyberduck

Une fois vos fichiers index.html et images prêts envoyez tous les répertoires de Ceevee sur votre FTP OVH.

Je vous montre les manipulations en vidéo avec Cyberduck (logiciel FTP gratuit dispo sur Mac et PC).

Faites bien attention de ne pas avoir des images trop lourdes, votre quota de stockage est limité à 10 mégas.

Référencez votre CV en ligne sur Google

Le processus de référencement naturel d’une page web est une étape assez longue surtout quand vous démarrez d’un site nouveau (nouveau domaine).

Il y a plus de 200 critères qui sont analysés par Google pour décider quelle page doit figurer en tête sur quelle recherche. Parmi les 3 plus importants, on peut noter :

• La popularité, l’ancienneté, la confiance qu’à Google en votre site.
• La popularité de la page cible déterminée par le nombre de pages web (internes et externes) qui pointent dessus.
• La pertinence du contenu de la page par rapport à la recherche de l’internaute (important d’avoir une bonne balise Title).

Pour gagner du temps et apparaître à coup sûr sur votre dénomination, je vous recommande d’ajouter l’adresse de votre site à Google My Business.

Voici donc mon CV responsive ebook.ovh

Il vous plaît ? Vous avez maintenant toutes les cartes pour faire de même tout seul à la maison.

Si vous souhaitez aller plus loin dans la personnalisation, comprendre comment vous pouvez faire décoller l’audience de votre site et gagner de l’argent avec, je vous recommande de lire mon dernier ebook BlogBuster disponible à 3,99 € chez Amazon.

Cet article Créer un site responsive et parallax pour promouvoir son CV en ligne est apparu en premier sur Les Astuces de Jeanviet.

Pourquoi ne pas créer une galerie photo en ligne ! C’est gratuit … et avec mon tuto, vous pourrez faire quelque chose de pro et propre en moins de 10 minutes !

1. Aperçu de la galerie photo que vous allez créer
2. Optimiser ses photos pour une diffusion sur le Web
3. Créer une galerie photo avec Highslide Editor
4. Publier son album photo sur les pages perso de Voila

Aperçu de la galerie photo

Je vous propose de créer une galerie photo à l’aide du script Highslide JS (équivalent de Lightbox JS pour ceux qui connaissent), voici ses avantages  :

• Rendu pro et élégant
• Générateur de galerie en ligne (gros avantage par rapport à Lightbox JS)
• Vos contacts n’ont pas besoin d’installer de plugin flash ou java
• On peut zoomer sur une photo qui s’ouvre alors dans la page (pas de popup désagréable)
• Code léger  : 10 Kb
• Navigation multilingue (français pris en charge)

Je vous invite à naviguer dans ma galerie photo perso en ligne et à zoomer sur chacune des petites photos pour lancer le diaporama.

Optimiser ses photos pour une diffusion sur le Web

Quoi de plus désagréable que d’avoir à attendre 10 secondes qu’une photo se charge complètement dans son navigateur… Ceux qui reçoivent des photos de 5 mégas dans leur boîte mail doivent comprendre de quoi je parle !

Un bon conseil avant de songer à créer une galerie photo en ligne, pensez à optimiser les dimensions et le poids et  de vos images. Dans l’idéal,  vos photos doivent faire moins de 800 pixels en largeur et moins de 500 ko en poids.

Voici 2 tutos utiles si vous n’êtes pas à l’aise avec ce genre de manips :

• Redimensionner photos avec Picasa (vidéo de 1’30 qui va à l’essentiel)
• Redimensionner photos avec Xnview (pour les utilisateurs qui ont plus de 100 photos à transformer)

Créer une galerie photo avec Highslide Editor

Passons maintenant aux choses sérieuses ! Je vous propose de créer un album photo en ligne de mes relooking perso ! ceux que je vous présente régulièrement sur mon blog… J’ai 37 photos à mettre en ligne :

RDV sur le générateur de Highslide JS ici : http://highslide.com/editor/  puis cliquez sur le bouton vert de le fenêtre superposée "get started". Dans l’onglet général mettez le langage de la galerie à French (français) et choisissez votre exemple de Galerie (un aperçu apparaît sur la droite).

Perso, j’aime bien Gallery : Horizontal thumbstrip, white style

Pour ajouter vos photos, cliquez maintenant sur l’onglet Gallery (1)

… puis sur le bouton Image Manager (2) et sur le bouton  Select Files to upload (3) pour charger vos images.

Une fois toutes vos images chargées, cliquez sur Upload now!

Vous pourrez ensuite changer l’ordre de vos photos en les glissant-déposant et ajouter des sous-titres en positionnant votre curseur de souris sur la photo et en saisissant les mots qui vont bien. Quand tout est OK, cliquez sur apply et OK en bas… Vous aurez alors un aperçu de votre galerie photo.

Maintenant, nous allons pouvoir récupérer cette galerie sous la forme d’un zip qui contient les images, miniatures, le code javascript qui permet de lancer les photos en zoom et de naviguer dedans, et la page html qui fait le lien avec tous ces éléments…. Pour cela appuyez sur le bouton Publish situé en haut à droite de l’aperçu.

Une pop-up va s’ouvrir, scroller vers le bas dedans et cliquez sur le bouton en bas à gauche "Yes" … ne vous faites pas berner pas les autres boutons verts (buy, donate, download) !

Cliquez ensuite sur Download a zip archive

Puis enregistrer le zip (highslide-custom.zip) quelque part sur votre PC.

Pour avoir un aperçu en local avant de le télécharger sur un site web, dézipper l’archive et ouvrez le fichier highslide-custom-example.htm avec votre navigateur.

Publier son album photo sur les pages perso de Voila

Pour que le maximum d’internautes puissent avoir accès à votre galerie photo, nous allons l’héberger sur une page perso voila : c’est gratuit, vous avez 100 mégas de stockage, pas de pub, et une url courte sympa (du type nomdusite.voila.net) sur laquelle vous pouvez communiquer.

Une fois que vous aurez un compte voila et que vous aurez créé votre première page perso confirmée, vous n’aurez plus qu’à envoyer le zip à la racine de votre site ou dans un dossier dédié (ex: photo),et  à extraire l’archive depuis le webftp voila.

Perdu pour cette dernière manip ? Suivez ce Tuto Vidéo : Créer une page perso Voila

La galerie finale avec les exemples du tuto  : http://jbviet.voila.net/photo/

Cet article Album photo en ligne : créer une galerie photos gratuite sur internet est apparu en premier sur Les Astuces de Jeanviet.

Notepad++ est un éditeur de texte qui gère les expressions régulières (regex) lorsqu’on souhaite rechercher et remplacer du texte. Ce gros avantage (gestion des regex) permet d’automatiser pas mal les ajouts, supressions, sélections de caractères dans un texte tout en visant juste. Voyons ensemble 8 cas concrets de rechercher et remplacer par (raccourci CTRL+H) qui vont vous permettre de retravailler vos données avant utilisation sous excel, calc, writer, word, ou éditeur html de votre blog.

Au sommaire de ce tutoriel:

1. Télécharger Notepad++
2. Rechercher et Remplacer par dans Notepad++
3. Notepad++ et les expressions régulières
4. 8 exemples pratiques de rechercher et remplacer par
5. Quelques liens pour aller encore plus loin !

Télécharger Notepad++

Notepad++ est devenu mon éditeur de texte par défaut… C’est avec Notepad++ que j’ai créé toutes les pages de Jeanviet.info (HTML, CSS). Je l’utilise aussi pas mal au travail pour retravailler des données. La grande force de Notepad++ est de gérer les expressions régulières lorsqu’on souhaite rechercher et remplacer du texte (CTRL+H)

Rechercher et Remplacer par dans Notepad++

Une fois que vous aurez ouvert votre fichier texte dans Notepad++, il suffira d’appuyer simultanément sur les touches CTRL et H (ou depuis le menu Rechercher -> Remplacer…) pour ouvrir la fenêtre Rechercher et remplacer par.

En (1) on met le texte générique (avec ou sans expressions régulières) à remplacer, en (2) le texte qui viendra en remplacement. En (3) on coche la case Expression régulière ou Mode étendu si nécessaire…. Et on appuie sur Remplacer tout ! si le résultat escompté n’est pas le bon, vous pouvez toujours revenir en arrière avec le raccourci clavier CTRL + Z.

Notepad++ et les expressions régulières

1. Qu’est-ce qu’une expression régulière en informatique ?
2. Les pincipales regex à utiliser avec notepad++
3. Conserver le texte d’une regex sous notepad++

C’est quoi les regex ?

Les expressions régulières (regex) en informatique  sont des règles qui permettent d’isoler dans une zone de texte certains types de caractères (lettre, numéro), ensemble de caractères (mots de 3 lettres, nombre à 4 chiffres, mots commencant par…) , position dans le texte (début, fin, saut de ligne).

Lorsqu’on a isolé ces bouts de textes aux prorpiétés choisies, on peut les supprimer, effacer tout ce qui se trouve autour, ou leur ajouter du texte. Les regex  permettent d’automatiser le traiement de gros fichiers de données… Si vous gérez des fichiers textes, excel de plus de 100 lignes, les regex vont vous faire gagner du temps !

Comme ceci est très abstrait, voici quelques exemples de ce que peuvent faire les regex :

• Trouver dans un texte toutes les phrases qui commencent par "il était une foie" et remplacer le texte par "Il était une fois" (^il était une foie)
• Chaque fois qu’un texte se termine par un point, on peut forcer un retour à la ligne (.$)
• Trouver dans un texte tous les mots qui contiennent 2 o consécutifs (.*oo.*)

Les Principales Regex  à utiliser avec notepad

Conserver le texte d’une regex

Pour expliquer la règle qui permet de conserver le texte d’une regex, je vais partir d’un exemple… Prenons ces 4 lignes de texte :

• mois : jeanviet 2010
• mois : février 2010
• mois : mars 2010
• mois : avril 2010

Je ne veux garder que le mois, c’est à dire jeanviet, février, mars, avril. On va donc supprimer tout ce qui se trouve avant les " : " et l’année " 2010" et conserver le mois entre les deux.

Voici la manip sous notepad :

La première regex (.*) prend en compte tout ce qui se trouve avant " : ", la deuxième (.*) c’est le texte entre " : " et 2010. L’utilisation des parenthèses () va nous permetre de rappeler la regex dans le "remplacer par". Comme je veux garder la 2ème regex, je mets "2" dans remplacer par, ce qui me donne en appuyant sur remplacer tout :

• jeanviet
• février
• mars
• avril

Si j’avais mis 1 à la place, j’aurais eu la 1ère regex, soit :

• mois
• mois
• mois
• mois

8 exemples pratiques de rechercher et remplacer par

1. Enlever les espaces en fin de mot
2. Mettre tout en minuscule ou tout en majuscule
3. Supprimer des lignes vides
4. Filtrer ses données : copier ou supprimer les lignes marquées
5. Transformer une colonne d’adresse emails en 1 ligne avec séparateurs (virgules)
6. Mettre des données en colonnes : saut de ligne à chaque séparateur
7. Ajouter du code HTML
8. Supprimer du code HTML

1. Enlever les espaces en fin de mots

En récupérant des données, il m’arrive fréquemment d’avoir à faire face à ce problème : l’export a ajouté des espaces en fin de cellule… Comment effacer ces espaces juste en fin de cellule et pas entre deux mots ? 

Copiez-collez vos données dans notepad++

• mois de jeanviet 
• mois de février 
• mois de mars 
• mois d’avril 

CTRL + H, puis ajouter dans rechercher " $" (tout ce qui se termine par espace : espace suivi de $) et rien dans Remplacer par.

Remplacer tout, et le tour est joué !

• mois de jeanviet
• mois de février
• mois de mars
• mois d’avril

 NB : on peut aussi faire Edition -> enlever les espaces/tabulations à la fin de la ligne (mais ça claque moins ;-))

2. Mettre tout en minuscule / majuscule

Notepad++ a créé des fonctions magiques automatiques pour résoudre vos problèmes de majuscules / minuscules. Toutes ces fonctions se trouvent sous TextFX -> TextFX Characters dans le menu horizontal de Notepad++. Assurez-vous que tout votre texte soit sélectionné au préalable (CTRL + A)

UPPER CASE met tout en majuscule

• MOIS DE JEANVIET
• MOIS DE FÉVRIER
• MOIS DE MARS
• MOIS D’AVRIL

lower case met tout en majuscule

• mois de jeanviet
• mois de février
• mois de mars
• mois d’avril

Sentence case rajoute une majuscule  en début de phrase (la phrase doit se terminer par un point)

• Mois de jeanviet.
• Mois de février.
• Mois de mars.
• Mois d’avril.

3. Supprimer des lignes vides

RDV ici :  TextFX -> TextFX Edit et appuyez sur Delete Blank Lines (supprimer les lignes vides)

4. Filtrer ses données

Si je veux exporter que des lignes qui parlent de jeanviet, on va procéder en 2 temps marquer les lignes qui parlent de jeanviet (1) puis les copier-coller (2)

Pour marquer les lignes, faites CTRL + F, ajoutez le texte jeanviet (1), cochez marquer les lignes (2), et appuyez sur rechercher tout  (3).

Toutes les lignes contenant jeanviet sont alors marquées

Dans le menu horizontal recherche, vous pouvez alors effectuer différentes actions sur les lignes marquées :

Les Copier, pour les coller ailleurs… je n’aurai que du jeanviet

Les Supprimer, adieu jeanviet  !

5. Transformer une colonne d’adresse emails en 1 ligne avec séparateurs (virgules)

Vous avez récupéré ces adresses mail via un tableur excel ou votre outil de blogging, elles sont ordonnées en colonne :

• julien@jeanviet.info
• jules@jeanviet.info
• jeremy@jeanviet.info
• jordan@jeanviet.info
• jean@jeanviet.info
• jonathan@jeanviet.info
• jason@jeanviet.info
• jimmy@jeanviet.info
• joris@jeanviet.info
• jean-baptiste@jeanviet.info
• johan@jeanviet.info

Si vous voulez leur envoyer tous un mail, il faut les séparer par des virgules et les mettre sur la même ligne, rien de plus simple avec notepad++

On fait CTRL + H, on coche la case Mode étendu (mode regex qui comprends les caractères spéciaux) dans recherche je mets rn (r c’est la fin de ligne – équivalent de notre $ en mode expression régulière – n c’est le retour à la ligne), dans remplacer par je mets une virgule ","

On peut ensuite appuyez sur remplacer tout

 Miracle ! ça fonctionne, je n’ai plus qu’à copier-coller cette ligne dans la zone destinataire de ma messagerie préférée.

6. Mettre des données en colonne (séparateur devient saut de ligne)

La réciproque de ce qu’on vient de voir avant est tout à fait possible à réaliser.

Il suffit de mettre la virgule dans recherche et le saut de ligne (rn) dans remplacer par… C’est aussi simple que ça

7. Ajouter du code HTML

Ca devient un peu technique là… Pour que cela soit profitable au plus grand nombre, je vous propose de voir comment on peut tranformer des images hébérgées sur le web en miniatures cliquables…. Ci-dessous les urls qui chargent les photos des 12 membres les plus actifs de jeanviet.info :

• http://jeanviet.info/about/jeanviet.jpg
• http://jeanviet.info/about/cedric.jpg
• http://jeanviet.info/about/emilie.jpg
• http://jeanviet.info/about/daria.jpg
• http://jeanviet.info/about/tdj.jpg
• http://jeanviet.info/about/ptitfred.jpg
• http://jeanviet.info/about/justin.jpg
• http://jeanviet.info/about/furious.jpg
• http://jeanviet.info/about/sonja.jpg
• http://jeanviet.info/about/bigfoot.jpg
• http://jeanviet.info/about/cc69.jpg
• http://jeanviet.info/about/ziharmo.jpg

 On va les copier-coller dans notepad++

Chaque image fait 83×97 en taille, on va en faire des miniatures cliquables de 40×47 (on garde la proportion, on diminue la taille), le lien ouvrira une nouvelle fenêtre.

On doit donc transformer ça :

http://jeanviet.info/about/jeanviet.jpg

en ça :

<a href="http://jeanviet.info/about/jeanviet.jpg" target="_blank"><img src="http://jeanviet.info/about/jeanviet.jpg" hspace="3px" width="40px"></a>

visuellement ça donne ça

On se lance ce n’est pas très compliqué ;- ) surtout que je vous ai donné le code html qui va bien avant

Dans rechercher on va ajouter (.*) et dans remplacer par, vous reprenez mon code en bleu, ce qui est en vert devient 1

Appuyez ensuite sur remplacer tout… le code est prêt, plus qu’à le copier-coller en mode html sur votre blog comme ceci :

C’est quand même plus sympa qu’une liste brute d’urls !

8. Supprimer du code HTML

Si on veut revenir à l’affichage brut d’urls à partir du dernier code html généré, voici ce qu’il faut ajouter dans les champs rechercher et remplacer en mode expression régulière.

On veut récupérer la 2ème expression regulière dans le href=" ", soit 2 dans remplacer par… Et on retrouve ainsi notre liste d’urls :

Quelques liens pour aller encore plus loin

Avec les regex, les gains de productivité sont infinis ! il y a des regex dont je n’ai pas parlé… des usages plus avancées à explorer, si vous souhaitez aller plus loin, voici quelques liens utiles :

1. Tuto vidéo pour connaître les sites qui pointent le plus souvent chez vous (en utilisant notepad++, des regex, et calc)
2. Expreg : si vous voulez vous lancer dans le développement php
3. D’autres exemples de regex pour Notepad++ (en anglais)

Autrement, vous pouvez aussi utiliser le forum logiciel pour poser toutes vos questions regex / notepad++

Cet article Rechercher et remplacer du texte avec Notepad++ et quelques regex est apparu en premier sur Les Astuces de Jeanviet.

Cela va bientôt faire un mois que Google a sorti une API officielle pour partager les stats google analytics sur son site Web. Grâce au boulot de Chris Hope (un grand merci à lui ;-)), on peut interroger cette Api via du code PHP et ainsi afficher à ses visiteurs les stats de fréquentation et d’usage de son site Web :

• visiteurs uniques,
• pages vues,
• recherches dans son moteur interne,
• provenance géographique,
• etc… 

Dans ce tuto, je vous propose de voir comment on peut afficher sur son site les 15 pages les plus vues au cours des 7 derniers jours avec pour chaque page le nombre de fois où elle a été chargée dans un navigateur (nombre de pages vues) + un lien vers cette page.

Le script qu’on va mettre en place ensemble vous permettra d’afficher de manière automatique sur votre site vos contenus les plus populaires auprès des internautes.

Sommaire

1. Les prérequis
2. Infos de compte à renseigner
3. Les variable de la fonction data
4. Vos pages php sur votre ftp
5. Aller plus loin

1/ Quelques prérequis

Pour pouvoir vous lancer dans ce tuto, quelques conditions sont nécessaires

1. Avoir un compte Google Analytics
2. Avoir un hébergement Web qui accepte le langage PHP 5
3. Prendre connaissance des Vues et Indicateurs que l’on peut interroger
4. Télécharger l’analytics API de Chris Hope (version jeanviet)

Il est aussi vivement recommandé que vous ayez quelques notions en PHP et HTML.

2/ Infos personnelles à rentrer dans index.php

Après avoir téléchargé l’analytics api de Chris Hope, dézippez-la, et ouvrez le fichier index.php qui se trouve à l’intérieur. Vous allez devoir rentrer vos informations personnelles de compte ici:

Ligne 9 et 10, ajoutez vos login et mots de passe dans les quotes. (ex $login =’jeanviet’). Ligne 14, vous devez indiquez le numéro de compte google analytics que vous voulez suivre (précédez le de ga:).

Vous pouvez obtenir ce numéro dans la section paramètres de vos comptes google analytics, en survolant le lien de votre compte vous verrez une url avec un id= c’est cet id qui nous intéresse (chez moi: 580508). Ligne 14, vous mettrez donc: $id = ‘ga:580508′.

3/ Paramétrer la boucle qui crée votre liste des pages les plus vues

Voici la boucle du fichier index.php qui va vous permettre d’afficher vos 15 pages les plus vues.

On fait appel (ligne 36) ici à une fonction data (définie dans analytics_api.php) qui interroge notre compte google analytics en fonction des vues, indicateurs, tris, périodicité, qu’on lui demande.

Dans analytics_api.php, certaines variables de la fonction data ont été définies à des valeurs par défaut:

• le tri se fait par ordre décroissant sur l’indicateur (variable $sort)
• la date de début a été mis à – 30 jours (variable $start)
• la date de fin à hier (variable $end)
• on affiche les 10 premiers résultats ($max_results) en commençant par le premier ($start_index)

Les deux variables $dimension (vue) et $metric (indicateur) sont à paramétrer dans index.php.

data($id, $dimension, $metric, $sort = false, $start = false, $end = false, $max_results = 10, $start_index = 1)

Comme on souhaite connaître les pages les plus vues, on va récupérer dans $dimension la vue qui nous donne les titres des pages et leurs urls.

ga:pageTitle,ga:pagePath

Au niveau de l’indicateur ($metric), on veut récupérer les pages vues du couple titre, url.

ga:pageviews

On est ok avec le tri par pages vues décroissantes défini par défaut, reste à indiquer que l’on veut commencer à – 7 jours, et avoir un max de résultats à 15, comme ceci:

$data = $api->data($id, 'ga:pageTitle,ga:pagePath', 'ga:pageviews',false, date('Y-m-d', strtotime('1 week ago')), false, 15);

On crée ensuite la boucle qui nous donnera pour chaque entrée du top 15: Titre -> URL -> Pages vues (7 derniers jours)

On restitue l’info sous forme d’une liste de liens numérotés et cliquables comme ceci:

Je vous ai détaillé le fonctionnement de la boucle au cas où vous vouliez la customiser (indcateurs, vues, dates, tri). Telle que définie par défaut dans index.php, elle nous retournera bien les 15 pages les plus vues de notre site.

4/ Envoyer analytics_api.php et index.php sur un répertoire de votre ftp

Créez un répertoire analytics à la racine de votre site web et envoyez les deux fichiers analytics_api.php et index.php

Vous pourrez ensuite charger l’url http://monsite.com/analytics/ pour afficher vos stats: http://jeanviet.info/analytics/

5/ Aller plus loin avec l’API Google analytics

Je vous recommande d’aller voir ces deux liens pour tout ce qui concerne les données à récupérer dans google analytics:

• http://code.google.com/intl/fr/apis/analytics/docs/concepts/gaConceptsOverview.html
• http://www.electrictoolbox.com/google-analytics-api-and-php/

Pour créer des graphs à partir de vos données, voici quelques liens utiles:

• En css: http://www.standards-schmandards.com/exhibits/barchart/
• en flash: http://www.fusioncharts.com/free/

Les appels étaient long à charger, je vous recommande de les mettre en cache à l’aide de skycache.

Cet article API Analytics – code PHP et tuto pour partager vos stats google analytics est apparu en premier sur Les Astuces de Jeanviet.

Au sommaire de ce tuto:

1. Fonctionnement de l’application Facebook Connect
2. Créer une application Facebook
3. Personnaliser l’application pour votre site
4. 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):

<br><br><a href="http://astuces.jeanviet.info/blog/facebook-application-facebook-connect-pour-augmenter-les-visites-de-son-blog.htm" onclick="window.open('http://monsite.com/facebook/invite-tes-amis.htm', 'invite tes amis', 'height=768, width=1024, top=0, left=5, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); return false;">
<img src="http://monsite.com/facebook/application-facebook.jpg" alt="application facebook" border="0"></a><br><br>

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.

A la suite de mon astuce qui vous apprenait à insérer un lecteur video sur votre site web, vous avez été très nombreux à me demander comment faire pour ajouter une playlist à côté de ce  lecteur video ?

Une seule video à afficher, ça ne semble pas convenir à tout le monde ! Alors, je me suis mis au charbon pour vous préparer un tuto simple qui vous apprend à faire appel à plusieurs videos (au format flv) sur une même page web via l’ajout d’une playlist (au format xml)…. Le résutat final étant ce que vous voyez ci-dessus !

Pour arriver à afficher cette maginfique playlist, il vous faudra passer un certain nombre d’étapes

1. Télécharger les fichiers player.swf et playlister.vbs
2. Convertir Video en FLV
3. Créer des vignettes JPG de vos videos pour la playlist
4. Générer un fichier XML à partir de videos FLV
5. Héberger SWF, JPG, FLV, XML sur Site Google
6. Générer et copier coller un code HTML

Afin de simplifier au maximum mes explications, je ferai toutes les manipulations sur un espace perso Google Page Creator (service gratuit de création de page perso limité à 100 mo d’espace).

Télécharger les fichiers player.swf et playlister.vbs

3 fichiers à télécharcher:

• player.swf : pour avoir un player flash sur son site
• playlister.vbs : pour générer un fichier playlist xml à partir de d’un dossier contenant des videos flv
• media player classic: pour lire les fichiers flv et réaliser des miniatures jpg

Convertir ses video au format FLV

Le player que je vous propose n’accepte que le format flv en entrée. Il faut donc convertir vos videos en flv (suivez mon tuto de conversion flv avec super). Le flv est un format de compression léger et particulièrement adapté à la diffusion de video en streaming... C’est ce format qui est utilisé notamment par YouTube et Dailymotion.

Un plugin firefox (DownloadHelper) permet d’ailleurs de télécharger les videos Youtube et Dailymotion au format flv.

Créer des vignettes JPG de vos videos pour la playlist XML

Placer toutes vos videos FLV dans un répertoire que vous nommerez flv (par exemple), comme ceci: 

Nous allons ensuite créer des vignettes image d’aperçu pour chacune des videos. Ces vignettes seront au format jpg et porteront le même nom que leur video associée (ex: alvin.jpg pour alvin.flv)… On veillera aussi à ne pas les mélanger – dans un 1er temps – avec les videos flv.

Pour se faire, Ouvrez une video avec media player classic, comme ceci:

Appuyez sur le bouton pause, quand l’aperçu vous plaît… Et Faîtes File -> Save Image…  et enregistrez votre image dans un répertoire image en la renommant du même nom que votre fichier flv (ici: ateam.jpg pour ateam.flv)

J’ai 6 fichiers video, il va falloir que je réitère cette manipualtion 5 fois de plus… Ensuite, j’aurai toutes mes vignettes:

Créer une playlist XML à partir de nos videos flv

Pour avoir une playlist, on est obligé de créer un fichier XML… Rassurez-vous, rien de très technique dans tout ça, il suffira de glisser déposer votre dossier flv (contenant exclusivement des videos au format flv) vers le fichier playlister.vbs (script qui crée sous windows un fichier xml playlist)… J’ai récupéré le fichier vbs chez Charlie Craig et je l’ai adapté à notre problématique.

On glisse et dépose notre dossier flv vers playlister.vbs comme ceci:

A la suite de cela, vous aurez ce type de message pour confirmer la création du fichier playlist.xml:

On peut ouvrir le fichier xml (avec le bloc notes) qui se trouve à la racine de notre dossier flv pour voir à quoi il ressemble

Dans title, c’est le titre qui s’affichera dans notre playlist, location (nom de notre video), et image (nom de l’image)… Il est important donc de bien nommer vos fichiers flv, et de donner le même nom à vos fichiers images !

Si vous connaissez l’url du dossier de destination de vos images, il peut être judicieux de la rajouter maintenant devant chaque fichier jpg après la balise <image>, comme ceci :

En la rajoutant, on es sûr que les vignettes s’afficheront. au chargement du player.

Héberger tous nos fichier sur un site web

Nous allons maintenant mettre tous nos fichiers sur un site web dans un même répertoire de destination… Je vais pour ma part tout placer à la racine de mon espace google page creator…. Voici les fichiers à transférer (on mélange tout ensemble maintenant) :

Comme j’ai 6 videos en stock, j’ai donc:

• 6 fichiers flv
• 6 fichiers jpg
• 1 fichier player.swf
• 1 fichier playlist.xml

Si vous avez un serveur FTP, vous allez pouvoir tout transférer d’un coup, sinon c’est fichier par fichier dans Upload Stuff (page de configuration de votre espace google page creator), on fait parcourir et on ajoute à chaque fois un nouveau fichier

C’est quasiment fini ! nous n’avons plus qu’à générer un code HTML que l’on pourra copier-coller sur un blog ou site perso.

Générer un code HTML pour copier-coller sur blog

Rendez-vous sur le générateur de Jeroen Wijering, c’est le lui le boss de la customisation de player flv !

On doit avoir flvplayer with a right-side chapterlist sélectionné … On clique sur Embed parameters pour indiquer le chemin absolu de notre fichier player.swf, et les dimensions de notre lecteur avec playlist (moi j’ai mis 490×200)

Cliquez ensuite sur File Properties, dans la zone file ajouter le chemin absolu de votre fichier xml comme ceci

Il y a d’autres options de customisation (couleur, template,…), on va les passer… Cliquez sur Update et preview code pour avoir un aperçu de votre lecteur flv avec playlist

Il est possible que les vignettes à gauche des titres ne s’affichent pas correctement dans l’aperçu (problème de chemin absolu de vos fichiers images dans le fichier xml ?)…. En dessous de l’aperçu, cliquez sur the embed code.

Vous n’aurez plus après qu’a copier-coler le code sur un blog…

Comme ceci

A vous de jouer maintenant !

Cet article Lecteur video FLV avec playlist XML à ajouter sur son site ou blog est apparu en premier sur Les Astuces de Jeanviet.

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:

1. Projet : Créer un site web sur le film Les Affranchis
2. Créer un compte / site Weebly
3. Choisir son Design / personnaliser son haut de page
4. Créer l’arborescence du site (Nouvelle Page, Nouveau Blog)
5. Ajouter des éléments à chaque page (Texte, Titre, Photo, Video, Liens)
6. 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:

1. Titre du site: Les Affranchis – le meilleur film de gangsters
2. Description: Videos, photos, articles, musiques, extraits sonores autour du Film Les Affranchis de Martin Scrosese
3. Cible: Cinéphiles, fans de films de Scorsese, fans de films de gangster
4. Arborescence du site : menu horizontal donnant accès aux rubriques suivantes: accueil, blog, photos, videos, musiques, ressources, livre d’or, contact
5. Couleurs dominantes: noir, rouge, gris
6. 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 !

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:

1. Publier un nouvel article en cliquant sur New Post
2. Modifier (edit) ou supprimer (delete) un article en cours
3. 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:

1. Dans la zone 1, on va mettre le titre de notre article (ex: bienvenue sur le blog des affranchis)
2. Dans la zone 2, on va pouvoir ajouter du texte, au dessus et en dessous une video ou une photo
3. 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:

<div class="js-kit-rating"></div>
<div class="js-kit-comments"></div>
<script src="http://js-kit.com/reviews.js"></script>

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.

1. nombre de caractères contenus dans un texte
2. nombre de mots contenus dans un texte
3. caractères les plus fréquents dans un texte
4. mots les plus fréquents dans un texte
5. ensemble de mots de 2 lettres les plus fréquents dans un texte
6. ensemble de mots de 3 lettres ou plus les plus fréquents dans un texte
7. analyse textuelle complète avec textalyser

Pour récupérer toutes les statistiques autour de nos caractères, mots, combinaisons de mots, nous allons utiliser ces 3 outils:

• Word Frequency Counter sera utilisé pour les 4 premiers traitements (caractères et mots les plus fréquents dans un texte)
• Phrase Frequency Counter sera utilisé pour les traitements 5 et 6 (ensemble de mots de 2 lettres et plus les plus fréquents dans un texte)
• Textalyser pour nous donner une analyse complète de notre texte (mots, caractères, phrases, syllabes,…)

Pour illustrer mes analyses textuelles, j’utiliserai le fichier texte suivant:

Top mots clés de jeanviet.info au 18/11/2007

1/ nombre de caractères contenus dans un texte

Allez sur Word Frequency Counter , et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton Character Count

On voit apparaître le nombre de caractères total utilisé dans notre texte, ici : 43 833, avec en moyenne 5,5 caractères par mot (Average letters per word)… le poids des prépositions utilisés dans le texte affaiblit la moyenne de caractères par mot (comme vous le verrez plus bas "de" et "en" font parties des mots les plus utilisés par mes visiteurs)

2/ nombre de mots contenus dans un texte

Allez sur Word Frequency Counter , et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton COUNT WORDS

On voit apparaître la fréquence des mots par rapport à notre classement initial, Face apparaît 38 fois, Transformer 61,…  et juste au dessus le nombre total de mots utilisés dans le texte (Total: 7 944), et le nombre de mots uniques (c’est-à-dire nombre de mots différents: on voit que mes visiteurs utilisent souvent les mêmes expressions… puisque sur 7 944 mots au total, seuls 1 298 sont uniques – Unique: 1 298 !)

3/ caractères les plus fréquents dans un texte

Allez sur Word Frequency Counter , et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton Character Count

On voit apparaître la fréquence des caractères par ordre alphabétique, a apparaît 2 856 fois, b 453,… Si on veut classer par ordre décroissant (par popularité donc), il faut appuyer ensuite sur la touche Character Frequency

On a bien ce qu’on cherchait, le "e" est la lettre la plus utilisée dans notre liste de mots clés avec 6 163 apparitions…. viennent ensuite les r (3 915), o (3 374),…

4/ mots les plus fréquents dans un texte

Allez sur Word Frequency Counter , et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton COUNT WORDS

On voit apparaître la fréquence des mots par rapport à notre classement initial, Face apparaît 38 fois, Transformer 61,… Si on veut classer par ordre décroissant (par popularité donc), il faut appuyer ensuite sur la touche Word Sort: Frequency

On a finalement ce qu’on voulait… sur 7 944 mots, le mot Video est utilisé 215 fois !

5/ ensemble de mots de 2 lettres les plus fréquents dans un texte

Allez sur  Phrase Frequency Counter, et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton Submit

On voit quels sont les combinaisons de mots à 2 mots qui sont  les plus populaires (à gauche on a le nombre d’occurrences). Il y un petit bug au niveau des données chiffrés qui ne sont pas retrancris mais bien comptabilisés… (si j’ai excel 2007 – ce qui est le cas dans ma liste – seul excel apparaît malheureusement)… les videos sont toujours sacrément populaires chez moi (blog et skyblog sont pas mal non plus)

6/ ensemble de mots de 3 lettres ou plus les plus fréquents dans un texte

Allez sur  Phrase Frequency Counter, et copier-coller votre texte  comme ceci, puis sélectionnez à l’aide du menu déroulant à droite le nombre de combinaisons de mots que vous souhaitez sélectionner (2, 3, 4, etc…):

>> cliquez sur ce lien pour vous rendre directement sur le site <<

Ensuite appuyez sur le bouton Submit

On voit quels sont les combinaisons de mots à 3 mots qui sont  les plus populaires (à gauche on a le nombre d’occurrences). Quand on rajoute un mot dans l’analyse, on comprend que mes visiteurs veulent du gratuit

7/ analyse textuelle complète avec textalyser

Allez sur  Textalyser, et copier-coller votre texte  comme ceci:

>> cliquez sur ce lien pour vous rendre directement sur le site <<

L’avantage de textalyser est qu’il gère le français et l’anglais dans sa stop liste (cette fonctionnalité permet de ne pas tenir compte des prépositions et des mots de moins de 3 lettres dans nos analyses). Choisissez donc French (pour français), si vous souhaitez vous limiter dans les top mots à 10 mots (mettez 10 dans number of words to be analyzed)… Ensuite appuyez sur le bouton Analyze the text quand tout est OK.

Voici quelques traitements auquels vous aurez accès:

Analyse linguistique : indice de lisibilité, densité lexicale, nombre moyen de syllabes par mots,…

10 mots les plus populaires (on aurait pu mettre 1000 dans les paramètres de la page d’accueil) hors prépositions et fréquence d’utilisation dans le texte

Longueur des mots (ex de la première ligne: on a 1 240 mots de 3 lettres)

Nombre de mots à 1, 2,… n syllabes

Sympa tous ces traitements ! et vous quels sont les 10 mots que vous utilisez le plus souvent dans vos textes ? quels sont les mots, associations de mots les plus présents dans les commentaires de vos blogs ou skyblogs ? testez tous ces outils et vous le saurez !

Cet article Compter le nombre de mots et de caractères d’une liste ou d’un texte est apparu en premier sur Les Astuces de Jeanviet.

1. Comment ajouter un moteur dans la barre de recherche ?
2. Comment créer facilement un moteur de recherche personnalisé ?
3. Comment rendre son moteur interne accessible à ses visteurs ?

OpenSearch – la techno qui rend tout cela possible

OpenSearch est une collection de standards xml qui permettent d’utiliser des moteurs de recherche depuis tout type navigateur / toolbar compatible OpenSearch.

Pour l’heure les 2 dernières versions des navigateurs  web les plus populaires de la planète (Firefox 2 et Internet Explorer 7) gèrent ce standard.

Ce qui nous autorise à effectuer nos recherches depuis les barres de recherches de ces 2 navigateurs en utilisant tout type de moteur de recherche (hors moteurs pagejaunes et free qui ne gèrent pas la méthode get).

1/ Comment ajouter un moteur dans la barre de recherche

Comme pour le format rss, le standard opensearch permet de s’abonner directement à un moteur de recherche si le code open search du moteur est présent dans le code html de la page qu’on visite.

Heureusement tout ça est transparent pour vous, on ne va pas vous demander d’aller consulter le code source de la page.

Pour RSS on avait un petit logo (pour firefox) qui apparaissait dans la barre d’adresse, qu’on avait juste à cliquer pour s’abonner:

Pour OpenSearch, c’est le logo de notre moteur par défaut qui se met en surbrillance pour nous indiquer qu’un open search est présent sur la page qu’on visite.

Firefox 2: Pour ajouter un moteur présent dans la page sous firefox 2, cliquez sur le triangle qui pointe vers le bas à gauche du cartouche de recherche, et descendez votre curseur jusqu’au nouveau moteur visé et cliquez dessus pour l’ajouter (jeanviet.info dans l’illustration).

Firefox 2: Votre open search apparaît alors dans le cartouche de recherche à la place de l’ancien moteur

Internet Explorer 7: Pour ajouter un moteur présent dans la page sous IE7, cliquez sur le triangle qui pointe vers le bas à droite du cartouche de recherche, et descendez votre curseur jusqu’à "Ajouter des moteurs de recherche" puis cliquer sur le nouveau moteur qui apparaît (jeanviet.info dans l’illustration).

IE7: Microsoft oblige – on fait tout pour que vous ayez du mal à enlever le Live Search – (1 action supplémentaire avant), encore 2 actions ensuite… cochez la case "en faire mon moteur de recherche par défaut" et appuyez sur le bouton "Ajouter le fournisseur".

IE7: Votre open search apparaît alors dans le cartouche de recherche à la place de live search (quel bonheur !)

FF2: Voici une petite démonstration animée pour comprendre toutes les manips à faire sous firefox 2.0 :

2/ Créer un moteur de recherche perso pour sa barre de recherche

Dans la partie précédente, les open search étaient disponibles uniquement si les sites web que l’on visitait en disposaient (tout le monde ne s’y est pas encore mis).

La bonne nouvelle, c’est que tout moteur de recherche qui utilise la méthode get (98 % des moteurs) – c’est-à-dire ceux qui gardent l’information "mot clé" dans les paramètres de leur url – est opensearchable ! (ie: on peut l’ajouter dans la barre de recherche de firefox ou ie7).

Pour se faire il faut créer un fichier xml dans lequel on va isoler l’url complète du moteur de recherche hors mot clé (mot clé qui sera mis en variable) … j’ai encore une autre bonne nouvelle à vous annoncer, un outil en ligne fait tout ça très bien sans qu’on ait quoi que ce soit à comprendre en xml : Ready2Search (ready to search, qui signifie prêt pour la recherche en français)

Je vous invite d’ailleurs à visionner la petite vidéo explicative qu’a fait l’auteur: tutoriel en anglais ready2search

Revenons à nos moutons… nous allons créer ensemble un opensearch dédié aux freewares en utilisant le moteur de recherche interne de freewares et tutos

Quand je cherche par exemple "conversion video" sur freewares et tutos, voici l’url qui apparaît dans la barre d’adresse de mon navigateur:

http://blogsearch.google.com/?as_q=conversion+video&bl_url=freewares-tutos.blogspot.com

1. En bleu, j’ai mis le début de mon url jusqu’au mot clé
2. En rouge, il s’agit de mon mot clé
3. En vert, c’est la fin de l’url après mon mot clé

Retenez bien ces couleurs, et leurs sens… puis rendez vous sur Ready2Search (cliquez sur l’image ci-dessous pour lancer l’interface de Ready2Search):

 Nous avons 3 champs à renseigner (+ image en option):

• Dans the search name, rentrez Freewares et Tutos
• Dans the front of search term (début de mon url avant mot clé), rentrez ce qu’on a mis en bleu plus haut
• Dans the back of search term (fin de mon url après mot clé), on rentre ce qu’on a mis en vert plus haut

Quand c’est fini… vous pouvez ajouter une image qui représentera le logo de votre moteur… dans le carré vert à droite, faîtes "Parcourir…" pour aller chercher votre image… puis appuyer sur le bouton "original color" pour l’ajouter.

Assurez-vous ensuite que les input encoding et output encoding sont mis en UTF-8 et appuyer sur "Make Search Plugin"

Dès lors un lien va apparaître en bas reprenant le nom de votre moteur avec les logos firefox et ie… cliquez dessus !

Une fenêtre vous demande ensuite si vous voulez ajouter le moteur dans votre barre de recherche… Faîtes alors "Ajouter"

Le moteur a été ajouté dans votre search barre, c’est magique, non ?

Un petit récap animé de toutes ces manips s’impose:

3/ Rendre son moteur interne accessible à ses visteurs

Maintenant… pour que la boucle soit bouclée… il faut qu’on soit capable de proposer à nos visiteurs (si on a un blog) le moteur interne que l’on vient de créer ! Pour qu’ils puissent faire excatement ce que je vous ai montré au début:

Ajouter un moteur dans la barre de recherche

L’étape 2 (créer un moteur de recherche perso pour sa barre de recherche) nous a préparé la moitié du travail: création d’un fichier xml open search

Il ne reste plus qu’à le récupérer et à l’uploader sur les serveurs de notre blog (si vous n’avez pas de serveur utilisez l’uploader de fichier du wiki), puis à ajouter une ligne de code dans les balises <head> de votre template de blog… c’est un peu plus technique que ce qu’on a vu avant… au pire, si vous avez des problèmes, j’assure le SAV dans les commentaires

Retour à Ready2Search, on récupère le fichier XML en cliquant sur le bouton ci-dessous (situé en bas de page):

Vous aurez dans votre répertoire de téléchargement, ce type de fichier:

R2S_OpenSearch_Freewares_et_Tutos.xml

Renommez-le comme ceci (clic droit + renommer):

opensearch.xml

Ca sera plus simple, pour vous expliquer la suite (on est sûr qu’on parlera de la même chose)

Il faut maintenant l’uploader sur un site web, google page creator ou l’uploader de fichier du wiki peuvent faire l’affaire !

Moi je vais tout faire sur Google Page Creator. Depuis le manager, dans la zone dédiée aux téléchargements, faîtes Parcourir… et ajouter votre fichier opensearch.xml

OK, nous l’avons ajouter:

Il se situe donc sur mon google space à cet endroit:

http://jeanviet.googlepages.com/opensearch.xml

Il faut maintenant y faire référence quelque part dans les balises head de votre template de blog… sur une page html ça donnerait ça:

<head>

<title>OpenSearch Freewares et Tutos</title>

<link rel="search"
 href="http://jeanviet.googlepages.com/opensearch.xml"
 type="application/opensearchdescription+xml"
 title="Freewares et Tutos" />

</head>

Tout ce qui est vert… vous recopiez ! ce qui est en rouge est à personnaliser…

Voici ce que donne cette page sur mon serveur google page creator:

OpenSearch Freewares et Tutos

J’espère qu’après tout ça The Bloom (rédacteur de freewares & tutos) proposera à ses lecteurs l’opensearch que je viens de lui créer  

Et que vous aussi vous en créerez des centaines… d’ailleurs, si vous voulez communiquer sur vos moteurs je vous invite à copier-coller vos settings urls dans les commentaires !

Cet article Ajouter un moteur dans la barre de recherche de son navigateur est apparu en premier sur Les Astuces de Jeanviet.

Contrairement à l’accoutumé, cette astuce va être aujourd’hui un peu plus technique. J’espère que je ne mettrai pas trop de monde sur le carreau. Si tu as un peu de mal à comprendre mes explications, contente-toi de suivre les instructions, de tester sur ton blog, et vois si tu arrives aux mêmes résultats que moi à la fin. J’ai testé toutes les manips sur Blogger et WordPress, ça doit aussi fonctionner avec Typepad, Over Blog, Dotclear (autres plateformes de blog qui permettent de changer le CSS).

Plusieurs étapes pour arriver au bout de cette astuce:

1. Linkrolls et Javascript
2. Créer une syntaxe HTML et CSS pour chaque bloc de liens
3. Personnaliser une liste de liens del.icio.us (favoris)
4. Personnaliser une liste de liens blinkbits (flux rss)
5. Personnaliser une liste de liens wishlistr (liste de cadeaux)
6. Aller plus loin dans la personnalisation

1/ Listes de liens et javascript

Les listes de liens pour blog (linkrolls) qui si’nsèrent à droite et / ou à gauche de tes contenus (chez moi c’est à droite) obéissent très souvent aux mêmes règles de balisage HTML (langage d’édition de pages web). On a une structure HTML de liste à puces

Qui se traduit comme ceci dans le code source de la page (code HTML):

<ul>
<li><a href="#">Lien 1 qui renvoie vers page 1</a></li>
<li><a href="#">Lien 2 qui renvoie vers page 2</a></li>
<li><a href="#">Lien 3 qui renvoie vers page 3</a></li>
<li><a href="#">Lien 4 qui renvoie vers page 4</a></li>
<li><a href="#">Lien 5 qui renvoie vers page 5</a></li>
</ul>

Ce qui donne cela sur ton navigateur:

• 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

Et toi, on t’avait dit d’insérer ça (code javascript):

<script type="text/javascript" 
src="http://del.icio.us/feeds/js/jeanviet?count=5">
</script> <noscript>
<a href="http://del.icio.us/jeanviet">
my del.icio.us</a></noscript>

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:

<div id="bloc1">
<h2>Ma liste de liens</h2>
<ul>
<li><a href="#">Lien 1 qui renvoie vers page 1</a></li>
<li><a href="#">Lien 2 qui renvoie vers page 2</a></li>
<li><a href="#">Lien 3 qui renvoie vers page 3</a></li>
<li><a href="#">Lien 4 qui renvoie vers page 4</a></li>
<li><a href="#">Lien 5 qui renvoie vers page 5</a></li>
</ul>
</div>

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

<div id="bloc1">
<h2>Ma liste de liens</h2>
<script type="text/javascript" 
src="http://del.icio.us/feeds/js/jeanviet?count=5">
</script> <noscript>
<a href="http://del.icio.us/jeanviet">
my del.icio.us</a></noscript>

</div>

Ce qui donnera ça sur ton navigateur:

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

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:

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

1. On colle le javascript où l’on veut qu’il apparaisse
2. On le fait précéder d’un titre (balise h2),
3. puis on englobe le tout dans un bloc (div avec un id différent -bloc1 dans l’ex)
4. 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)

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)

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

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.