19nov

ISIS Ads Management, un widget d’annonce 125*125px pour wordpress

Il y a plusieurs façons de monétiser son blog wordpress. Depuis quelques temps les annonces 125*125px trouvent de plus en plus de place sur les blogs.

C’est pourquoi, je vous présente le widget ISIS Ads Management créé par X-OR.

Ce widget est particulièrement intéressant car vous pouvez placer autant d’annonces que vous voulez grâce à un formulaire très simple. De plus pour organiser vos annonces, il suffit de les faire glisser !

Pour voir une vidéo de présentation, c’est ici.

Et pour télécharger le widget, c’est ici.
18nov

Les bases du html, Partie 1: les balises META

Les méta informations servent à décrire votre page web ou votre site. Elles permettent d’indiquer le contenu de votre page, l’auteur, la langue, des mots clés, etc… Elles sont utilisées par les moteurs de recherche pour le référencement.

Ces informations ne sont pas affichées par le navigateur.

Les différentes balises META:

  • Language: Permet d’indiquer la langue utilisée. (obsolète)
  1. <META HTTP-EQUIV="Content-Language" CONTENT="fr">
Exemple d’argument:
FR = français
EN = anglais
EN-US = américain
DE = allemand
  • Charset: Permet d’indiquer le type d’encodage de votre page.
  1. <meta name= "charset" content= "utf-8">
Encodage pour le Français:
iso-8859-1
windows-1252
utf-8
  • Author: Permet d’indiquer des le nom de l’auteur de la page.
  1. <META NAME="Author" CONTENT="Nom Prenom">
  • reply-to: Permet d’indiquer une adresse mail. (Attention au spam)
  1. <meta name="reply-to" content="adresse e-mail">
  • Copyright: Permet d’indiquer le copyright.
  1. <META NAME="Copyright" CONTENT="woodiv">
  • Category: Permet d’indiquer aux annuaires la catégorie de votre site.
  1. <meta name="category" content="Nom de la categorie">
  • Identifier-url: Permet d’indiquer l’adresse de base du site. (obsolète)
  1. <META NAME="Identifier-URL" CONTENT="www.woodiv.com">
  • Publisher: Permet d’indiquer l’éditeur du site.
  1. <META NAME="Publisher" CONTENT="Nom Prenom">
  • Description: Permet de décrire le contenu de votre page web.
  1. <META NAME="Description" CONTENT="Placer le texte de la description ici">
  • Keywords: Permet d’indiquer des mots clés correspondants au contenu de votre page web.
  1. <META NAME="keywords" CONTENT="mot1, mot2, mot3, mot4">
  • Robot: Permet d’indiquer aux robots si vous autorisez le référencement ou non.
  1. <meta name="robots" content="index, follow">

all : Le robot indexe tout (par défaut)
none : Le robot n’indexe rien du tout
index : Votre page est indexée
noindex : Votre page n’est pas indexée mais il suivra les liens de cette page
follow : Le robot récupère les liens de votre page pour les référencer plus tard
nofollow : Le robot ne récupère pas les liens de votre page

  • pragma: Permet d’indiquer de ne pas utiliser le cache des navigateur.
  1. <meta http-equiv="pragma" content="no-cache">
  • refresh: Permet d’actualiser la page ou de faire une redirection en utilisant l’option “URL=”
  1. <meta http-equiv="refresh" content="10">
  2. <meta http-equiv="refresh" content="10; URL=http://www.woodiv.com">
“Content” indique ici les secondes à attendre avant de rafraichir la page ou d’effectuer la redirection. (0 pour une action immédiate)
17nov

Chabal le duel !

Non je ne suis pas fou mais je veux simplement vous informer qu’orange a publié un jeu complêtement en flash avec le célèbre Rugbymen Chabal.

L’idée est tellement originale que je ne pouvais m’empêcher de créer un article sur ce sujet.

Je vous laisse découvrir par vous même: chabal-le-duel.com

Ou vous pouvez regarder la video:
Image de prévisualisation YouTube
17nov

La conférence LeWeb’08 à Paris le 9 et 10 Décembre

La conférence web qui grimpe, qui grimpe avec cette année plus de 1000 participants venants de 25 pays et 30 startups !

Pour obtenir plus d’informations et surtout voir la listes des professionnels présents, rendez-vous sur le site LeWeb’08

Et pour obtenir une remise sur votre inscription, rendez vous sur le blog presse-citron. Pourquoi je fais ce lien ? Parce qu’une conférence avec un droit d’entrée à plus de 1000€, de nos jours c’est un peu dur à avaler !!!
17nov

Créer votre menu css en 5 étapes avec CSS menu builder

CSS Menu Builder est un excellent outil pour créer rapidemment un menu en css pour votre site. A la différence d’autre site, avec CSS Menu Builder, c’est à vous de créer le menu.

Cet outil fourni tout: le code html, le code css et les images. Il ne vous restera plus qu’à l’intégrer à votre site.

Comment ça marche:

  1. Choisissez l’orientation de votre menu (horizontal ou vertical).
  2. Sélectionnez le fond du menu.
  3. Sélectionnez le style du menu. (aspect des liens)
  4. Choisissez les couleurs des differents éléments de votre menu.
  5. Télécharger le fichier zip (possibilité de faire un copier/coller des codes et images)

Le site en question: CSS Menu Builder
17nov

Les bases du html

Le html est la base d’un site web internet. C’est avec ce code que vous allez créer le squelette de vos pages web.

Le code html est composé de balise aussi appelé “tag” ou “commande” qui seront interprétées par le navigateur. La plupart du temps, on doit ouvrir une balise (ex: <html>) et la fermer (ex: </html>)

Voici la structure de base d’une page html:

  1. <html>
  2. <head>
  3. <title>Titre de la page</title>
  4. <style type="text/css">
  5.  
  6. </style>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

La balise <html>: Indique au navigateur qu’il doit afficher du code html.

La balise <head>: Donne des informations sur le contenu de la page. Voir l’article sur les META

La balise <title>: Indique le nom de la page. Cette information est affiché dans la barre du navigateur.

la balise <style type=”text/css”>: C’est dans cette balise qu’il faut écrire le code CSS. Ce code permet de mettre en forme votre page interne.

La balise <body>: C’est la partie que le navigateur affiche.
16nov

Photoshop en ligne et en flash

Non ce n’est pas Adobe Photoshop mais un site internet qui a créé une application plutôt impressionnante, un éditeur d’image en ligne et en flash.

Ce site, c’est Pixlr. Pour accéder à l’éditeur d’image, cliquez sur le drapeau de votre choix. Vous pourrez enregistrer votre création en JPG ou PNG.

Une petite astuce: Pour revenir en arrière, le “ctrl-z” fonctionne !

Quand on observe ce genre de web-appli, on se demande si le logiciel sur PC a encore beaucoup de jour devant lui !

Le site internet: Pixlr
16nov

Une façon originale pour présenter ses photos

Flashmo propose des applications flash gratuites pour présenter des images ou photos à vos visiteur d’une façon très originale.

L’utilisation est trés simple car les applis Flashmo utilisent un fichier xml pour intégrer vos images à l’animation Flash.

Il suffit donc de copier vos images dans un dossier (par défaut, il se nomme thumbnails) et d’indiquer le chemin dans le fichier XML.

Pour télécharger les différentes applis flash et avoir plus d’infos, rendez-vous sur Flashmo
16nov

Ajouter un formulaire de recherche web 2.0 sur votre blog

Sikbox, c’est le nom de ce nouveau service trés web 2.0. Sikbox permet d’intégrer à son blog un formulaire de recherche qui fonctionne comme “Google Suggest”.

Oui mais c’est quoi “Google Suggest” ?

“Comme Google Suggest” veut dire que les résultats s’affichent juste en dessous du formulaire sans recharger la page !

L’avantage du service Sikbox réside dans le fait qu’il n’y a aucune connaissance  à avoir pour l’utiliser.

Vous indiquez votre nom de domaine, vous choisissez le style de formulaire et le nombre de réponses à afficher. Suite à ces renseignement, vous recevez un script à placer dans vote site et c’est fini !

Rendez sur Sikbox pour tester…
16nov

Choisir une feuille de style pour IE avec les commentaires conditionnels

Les commentaires conditionnels permettent de choirsir une feuille de style précise en fonction de la version d’Internet Explorer.

Le principe est simple. Il suffit de placer ce code entre les balises <head> et </head> de votre code html:

  1. <!--[if IE]>
  2. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  3. <![endif]-->

Ce qui se traduit par: Si le navigateur est Internet Explorer, il faut utiliser cette feuille de style. On peut bien sûr utiliser une autre fonction entre les balises comme par exemple: indiquer au visiteur qu’on sait qu’il utilise Internet explorer !

Syntaxes et options possible pour les commentaires conditionnels:

  • if IE 5 : Pour toutes les versions d’Internet Explorer 5 (5.0 – 5.5)
  • if IE 6 : Pour la version 6 d’Internet Explorer
  • if IE 7 : Pour la version 7 d’Internet Explorer
  • lt : Pour toute les versions inférieurs à … (ex: if lt IE 6 –> Le code sera éxécuté par Internet Explorer 5 et 5.5)
  • lte : Pour toute les versions inférieurs ou égales à … (ex: if lte IE 6 –> Le code sera éxécuté par Internet Explorer 5, 5.5 et 6)
  • gt : Pour toute les versions supérieurs à … (ex: if gt IE 6 –> Le code sera éxécuté par Internet Explorer 7 et 8 )
  • gte : Pour toute les versions supérieurs ou égales à … (ex: if gte IE 6 –> Le code sera éxécuté par Internet Explorer 6, 7 et 8 )

Voici un exemple de code que j’utilise régulierement:

  1. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  2. <!--[if lt IE6]>
  3. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  4. <![endif]-->
  5. <!--[if lt IE7]>
  6. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  7. <![endif]-->
  8. <!--[if gte IE7]>
  9. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  10. <![endif]-->

Dans cet exemple, la première ligne sera utilisé par firefox (Safari su mac). Il faut donc construire le CSS autour de ce navigateur.

Ensuite pour les feuilles de styles spécifiquent aux versions de IE, il suffira de modifier les lignes qui provoquent une mauvaise mise en page.