Concous BeNoot pour gagner un iPad

14 05 2010

BeNoot (http://benoot.com) organise un concours pour soutenir un de leur candidat, je vous remet ici le mail expliquant comment s’inscrire:

Entre aujourd’hui et le 19 Mai 2010, vous devez publier au moins un article pour soutenir Romain Corraze, candidat soutenu par BeNoot dans le concours Reportour de France Soir. Une fois votre article en ligne, venez nous indiquer son adresse Internet (et celle de votre parrain si ce n’est pas encore fait) à la page : http://benoot.com/concours-voyage/article. C’est tout.

Augmentez facilement vos chances de gagner :
•       Parrainez des participants! Parmi vos lecteurs, il y a forcément des blogueurs. Invitez les à participer eux aussi en vous indiquant comme parrain. Si 15 de vos lecteurs publient un article, vous avez 15 chances de plus de remporter 1 iPad !
•       1 participation = 1 blog ! Vous possédez plusieurs blogs ? Publiez un article sur chacun d’eux. Ex : Si vous possédez 3 blogs, vous faites 3 articles différents. Vous avez donc 3 chances de remporter le gros lot ! Et vous pouvez même vous auto-parrainer (Parain /filleul doivent être 2 blogs différents) pour peut-être remporter les 2 iPad !





Vodeo vous fais gagnez un iPad

6 04 2010

A peine sorti aux Etats-Unis l’iPad est disponible en France… grâce à un concours sur Vodeo un site de vidéo à la demande spécialisé dans les documentaires.

Via Presse-Citron





Les sélecteurs CSS, partie 2 : on mélange tout

24 03 2010

Nous avons précédemment vus les sélecteurs CSS de base  (partie 1), ceci nous a permis de (re)découvrir des moyens efficaces d’identifier les éléments dans une page. On va à présent aborder le regroupement, les sélecteurs combinés et d’attribut. Prêt? C’est parti!

Le regroupement

Il vous est surement déjà arrivez de devoir répéter plusieurs fois les mêmes propriétés CSS pour des éléments différents, ce qui est très fastidieux, heureusement pour nous le regroupement est là. Ce dernier consiste à enchainer les sélecteurs en les séparant pas des virgules, les propriétés correspondantes s’appliqueront alors à tous ces sélecteurs.

<html>
  <head>
    <style>
      p, div{font-family:verdana;}
      p {color:#F00;}
      div{color:#00F;}
    </style>
  </head>
  <body>
    <p>élément P</p>
    <div>élément DIV</div>
  </body>
</html>

Comme vous pouvez le constater ici les éléments « P » et « DIV » ont la même police d’écriture mais on chacun une couleur différente. On peut donc définir des propriétés communes à de multiples sélecteurs en une fois, ce qui n’empêche pas pour autant de définir des propriétés spécifiques à un sélecteur.

Les combinateurs

On va aborder ici une notion intéressante qui permet d’appliquer des propriétés CSS à un même type d’élément sans lui indiquer de classe ou d’identifiant en utilisant l’arborescence des éléments de la page.

Sélecteur descendant

Pour changer je vous mets directement l’exemple et j’expliques après :

<html>
  <head>
    <style>
      p ul{list-style-type:circle;}
      div ul{list-style-type:square;}
    </style>
  </head>
  <body>
    <p>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </p>
    <div>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </div>
  </body>
</html>

On a ici deux listes à puce la première dans un élément « P », la seconde dans un élément « DIV », on n’a indiqué nulle part de classe ou d’identifiant et pourtant elles apparaissent différemment, pourquoi ?

Regardons la définition des styles, on a « p ul » avec des puces rondes et « div ul » avec des puces carrées, en fait on dit que les éléments « UL », auront des puces rondes quand ils sont inclus dans un élément « P » et qu’ils auront des puces carrées dans dans un « DIV ».

Sélecteur d’enfant

Celui-ci ressemble énormément au précédent, à un détail près, le sélecteur descendant doit être l’enfant, c’est-à-dire qu’il ne doit pas y avoir d’élément entre le sélecteur parent et l’enfant.

<html>
  <head>
    <style>
      p > strong{color:red;}
    </style>
  </head>
  <body>
    <p>
      <strong>l'enfant</strong>
      <div><strong>petit enfant</strong></div>
    </p>
  </body>
</html>

Seul l’enfant est en rouge, le petit enfant n’a aucun style d’appliqué.

Sélecteur adjacent

Il est construit en plaçant deux sélecteurs autour d’un « + », comme ceci « E1 + E2 », cela peut se traduire par tout élément E2 suivant un élément E1.

<html>
  <head>
    <style>
      p + p{color:red;}
    </style>
  </head>
  <body>
    <div>
      <p>E1</p>
      <p>E2</p>
    </div>
  </body>
</html>

Il va de soi que les deux éléments doivent avoir le même
parent.

(Petit) ajout pour le regroupement

Avec ce que vous venez d’apprendre sur les combinateurs vous seriez tentez de faire des regroupements « complexes », comme ceci :

<html>
  <head>
    <style>
      #bloc1 p, li{list-style-type:none;}
    </style>
  </head>
  <body>
    <ul id="liste1">
      <li>puce1</li>
      <li>puce2</li>
      <li>puce3</li>
    </ul>
    <div id="bloc1">
      <p>paragraphe</p>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </div>
  </body>
</html>

On définit nos style de sorte que la liste (« UL »)dans l’élément « DIV » n’est pas de puce, mais quand on regarde le résultat il n’y a de puce nulle part ! Que s’est il passé ? On a regroupé un sélecteur descendant « #bloc1 p » avec un sélecteur simple « li », il n’a pas été indiqué que ce dernier devait être un descendant de « #bloc1 », voici une autre notation possible pour ce que l’on a fait :

#bloc1 p {list-style-type:none;}
li {list-style-type:none;}

La bonne méthode était donc :

#bloc1 p, #bloc1 li {list-style-type:none;}

Les sélecteurs d’attributs

Ils permettent de sélectionner un élément en fonction de ces attributs. Un peu de syntaxe pour commencer :

  • E[att] : tout élément ayant l’attribut « att »
  • E[att=val] : tout élément ayant l’attribut « att » égale à « val »
  • E[att~=val] : tout élément dont l’attribut « att » contient une liste de valeur séparé par des espaces et dont une de celles-ci est égale à « val »
  • E[att|=val] : tout élément dont l’attribut « att » contient une liste de valeur séparé par des tirets et débutant par « val ».

Exemple :

<html>
  <head>
    <style>
      p[title] {color:red;}
      p[title=autre] {font-family:arial;}
      p[title~=titre2] {font-weight:bold;}
      p[lang|=fr] {color:#00f;}
    </style>
  </head>
  <body>
    <p title="titre"> paragraphe avec un attribut "title"</p>
    <p>paragraphe sans  attribut "title"</p>
    <p title="autre"> paragraphe avec un attribut "title" égale à "autre"</p>
    <p title="titre1 titre2 titre3">paragraphe avec un attribut "title" égale à "titre1 titre2 titre3"</p>
    <p lang="fr-be">paragraphe avec un attribut "lang" égale à "fr-be"</p>
    <p lang="fr-fr">paragraphe avec un attribut "lang" égale à "fr-fr"</p>
    <p lang="en-us">paragraphe avec un attribut "lang" égale à "en-us"</p>
  </body>
</html> 

Ce n’est qu’un au revoir

C’est fini pour le moment, j’espère que vous avez découvert plein de chose et les utiliserez à bon escient (et souvent 🙂 ). J’ai écrit ce tutoriel en suivant cet article Sélecteurs CSS 2.1.





Google quitte la Chine

23 03 2010

Finalement Google arrêtes son moteur de recherche en Chine, mais les chinois pourront toujours utilisé Google.cn.

En fait Google.cn sera redirigé vers Google.com.hk qui correspond aux serveurs de Google à Hong Kong. Les chinois auront donc accès à tous les services de Google sans censure, certes avec probablement des problèmes d’accès car les serveurs de Hong Kong ne sont probablement pas adapté à une telle charge. Google met à disposition un site pour connaitre la disponibilité de ces services en Chine

Il faut également préciser que le gouvernement chinois à la possibilité de bloquer l’accès à Google.cn, ce qui, à mon avis, il ne se privera pas de faire.

Via AccessoWeb.com





Bilan sur ma vie de blogueur

20 03 2010

Cela fait à présent deux semaines que mon blog est lancé, il est peut être présomptueux de parler de bilan mais c est un moyen pour moi de vous faire partager m’on ressenti sur ma nouvelle vie de blogueur.

Je ne sais pas ou je vais mais j’y vais

Je n’ai pas encore bien défini la ligne éditoriale de ce blog (le développement web en fait partie ça c’est sûr), j’écris mes articles sur ce qu’il me plait et sur l’inspiration du moment. Je n’oublie pas pour autant que certaines thématiques sont déjà bien occupées par d’autres blogs et qu’il me sera difficile de me faire entendre sur celles-ci. Mais c’est avant tout lié au plaisir que je prends à écrire et à vous faire partager mes découvertes, donc on verra bien.

Du rythme et du style

Quand à ma vie de blogueur, je pense que ça se résume à une histoire de rythme et de style. De rythme car il faut aménager son emploi du temps pour pouvoir bloguer, ce qui n’est pas forcément facile quand on a une activité professionnelle (avec transport inclus). Et il ne faut pas bon plus oublier sa vie sociale. J’estime avoir trouvé la bonne voie : un ordinateur portable au lit :-).

Une affaire de style car c’est mon style d’écriture (non, pas les CSS) qui vous fera revenir ici. Vous avez probablement remarqué (comment ça non ?!) que je passe souvent du « je » personnel au « on » impersonnel, le « je » s’accompagne généralement du « vous », ce qui implique un échange entre moi, le rédacteur, et vous, les lecteurs. Mais a bien y réfléchir ces deux styles ont chacun leurs utilité, le « je » se prête bien aux articles où je vous fais partager une actualité, un gadget et où j’en donne mon avis. Le « on » est plus adapté à un tutoriel, nous devons suivre vous et moi un ensemble de règles pour parvenir au même résultat.

Bilan du bilan

Je me cherche encore mais je pense être sur la bonne voie. Je suppose que je ça été de même pour les autres blogueurs à leurs débuts donc je ne m’inquiètes pas outre mesure. Courage!





Les sélecteurs CSS, partie 1 : les bases

19 03 2010

En tant que web développeur l’utilisation de feuille de style est un passage obligé et vous connaissez probablement toutes les propriétés mais utilisez vous a bon escient toutes les possibilités des sélécteurs ?

C’est quoi un sélecteur ?

Oh presque rien, c’est ce qui permet aux propriétés de s’appliquer à un endroit précis, par exemple:

p {font-size : 12px;}

Ici le sélecteur c’est l’élément (la balise) « p ».

ah! OK.

Les sélecteurs servent, comme leur nom l’indique, à sélectionner une partie de la page HTML et y appliquer un style.

Le sélecteur universel « * »

Celui là vous ne le voyez pas souvent (même si on s’en sert implicitement, vous verrez par la suite), en fait il représente tous les éléments de la page, donc toutes les propriétés rattachées a l’élément « * » seront appliqués partout. Dans la plupart des cas vous vous en servirez pour faire ça:

* {margin:0px;}

Le sélecteur de type

Ici c’est pour sélectionné un élément (ne me demander pas pourquoi on l’appel sélecteur de type et pas d’élément), comme ceci:

p {margin-left:5px;}

Le sélecteur ici c’est l’élément « p », donc tous les éléments « p » de la page auront une marge de gauche de 5px.

Les pseudo-éléments

On désigne par ce terme les éléments qu’on ne peut atteindre avec les autres sélecteurs, par exemple la première ligne d’un paragraphe.

  • :first-line : celui-ci permet d’atteindre la première ligne d’un élément de type block, inline-block, list-item, table-caption et table-cell (voir cet article pour plus d’infos)
  • :first-letter : identique au précédent mais ne s’appliquera qu’au premier caractère alphanumérique de l’élément.
  • :before et :after : ceux-ci  sont intéressants car il permettent d’ajouter du contenu avant et après l’élément.

Vous savez ce qui vous attends ? Un petit exemple pour expliquer tout ça:

<html>
  <head>
    <style>
      p:first-line {font-family:verdana;}
      p:first-letter{color:red;}
      p.court{width:150px;}
      p.long{width:300px;}
      #essai:before{content:"before"; padding-right:5px;font-family:arial; background-color:#aaF000;}
      #essai:after{content:"after"; padding-left:5px;font-family:arial; background-color:#aaF000;}
    </style>
  </head>
  <body>
    <p>Ce paragraphe contient beaucoup de texte, et n'est pas très large</p>
    <p>Ce paragraphe contient beaucoup de texte mais est plus large que le précédent</p>
    <p id="essai">test sur les pseudo-éléments :before et :after</p>
  </body>
</html>

Ce que vous devriez obtenir:

Le sélecteur de classe

Ce sélecteur fait référence à l’attribut classe d’un élément, on utilise « . » pour le désigner, un petit exemple pour voir ?

<html>
  <head>
    <style>
      p{margin-left:5px;}
      p.uneClasse{margin-right:5px;}
    </style>
  </head>
  <body>
    <p class="uneClasse">du texte</p>
    <div class="uneClasse">une div</div>
  </body>
</html>

Le premier élément , le « p », aura donc une marge à droite de 5px et une marge à gauche de 5px (et oui! On peut mixer les sélecteurs), l’élément « div » n’aura quant à lui qu’une marge de droite de 5px (car on n’a pas définit de marge autre ni sur la classe ni sur l’élément).

On peut utiliser un sélecteur de classe indépendement d’un sélecteur de type, comme ceci:

.uneClasse {font-size:16px;}

Ici tous les éléments ayant un attribut « class » égale à « uneClasse » auront une taille de caractère de 16px. Cette notation revient à faire:

*.uneClasse {font-size:16px;}

Je vous avais bien dit que vous utilisiez le sélecteur universel implicitement.

A notez également pour qu’il est possible d’indiquer plusieurs classe dans l’attribut comme ceci:

<p class="rouge bleu vert"> rouge, vert ou bleu ?</p>

Mais laquelle s’applique, quand elles modifient la même propriété?

Bizarrement ce n’est pas l’ordre dans lequel les classes sont écrites dans l’attribut mais celui dans la feuille de style, essayez avec ça:

<html>
  <head>
    <style>
      .vert {color:green;font-weight:bold;}
      .rouge {color:red;font-family:arial;}
      .bleu {color:blue;text-decoration:underline;}
    </style>
  </head>
  <body>
    <p class="rouge bleu vert"> rouge, vert ou bleu ?</p>
  </body>
</html>

Et changez l’ordre des classes vert, rouge et bleu dans la définition du style. Dans cet exemple le texte sera de couleur bleue, toutes les autres propriétés définis par les classes sont appliqués à l’élément car il n’y en à pas une commune à chaque classe.

avec la classe bleu en dernier:

puis la classe rouge en dernier:

En y réfléchissant bien ce n’est pas si bizarre que ça, la feuille de style est « lu » par le navigateur de haut en bas, c’est donc le sélecteur le plus « bas » qui est appliqué.

Les pseudo-classes

On peut les considérer comme des attributs aux sélecteurs, ce sont des notations spécifiques qui permettent de définir les propriétés d’un style en fonction de l’état d’un élément ou lorsqu’un évènement se produit sur l’élément (directement ou par une classe) lié au style.

Pseudo-classes d’ancres

On parle ici des pseudo-classes qui vont affectés un élément « a » disposant de l’attribut « href », il y en à 2:

  • :link : ce sera l’apparence du lien tant qu’il n’est pas visité (cliqué).
  • :visited : l’apparence du lien après avoir été visité.
a:link {color:green}
a:visited {color:red}

Notez bien que ces deux pseudo-classes sont exclusives, un lien est soit visité (:visited) soit non-visité (:link).

Pseudo-classes dynamiques

Celles-ci sont moins restrictives, elles peuvent s’appliquer à beaucoup plus d’éléments:

  • :hover : se déclenche lors du passage de la souris sur l’élément.
  • :active : se déclenche lorsque l’élément est activé, par exemple en pressant le bouton.
  • :focus : se déclenche lorsque l’élément accepte des saisies au clavier.

Un petit exemple pour mieux comprendre:

<html>
  <head>
    <style>
      input:hover {background-color:#000;color:#F00;}
      input:active {border:2px solid #0FF}
      input:focus {background-color:#000; color:#FFF;}
    </style>
  </head>
  <body>
    <input type="text">
  </body>
</html>

Ce qu’on obtient pour :hover

pour :active

et pour :focus (la bordure jaune est du au navigateur que j’utilise!)

Le sélecteur d’ID

Celui là vous permet de définir un style en ciblant un élément par son attribut « id », pour ce faire utilisez cette notation #monId.

<html>
  <head>
    <style>
      p {background-color : #00F; color:#FFF;}
      #monID {background-color:#c0c0c0;}
    </style>
  </head>
  <body>
    <p id="monId">avec identifiant</p>
    <p>sans identifiant</p>
  </body>
</html>

La propriété « color » s’applique bien au deux éléments « p » mais seul celui avec l’identifiant « monId » à un arrière-plan gris, l’élément « p » sans identifiant a l’arrière-plan défini par le sélecteur « p ». Le sélecteur d’ID est donc prioritaire sur le sélecteur de type.

Comme ceci:

Bientôt la suite

Et nous voici à la fin de cette première partie sur les sélecteurs CSS, nous verrons les sélecteurs un peu plus avancé dans la seconde partie que vous retrouverez prochainement.





Le blogueur pense : catégorie ou mot clé ?

18 03 2010

Je me faisais ces jours ci une petite réflexion sur l’usage des catégories dans un blog, en effet vaut-il mieux sur-catégorisé ses articles ou indiqué plusieurs mots clés?

Il faut savoir s’organiser.

Bien catégorisé ses articles c’est faire preuve d’organisation, chaque article est à sa place et vos visiteurs vous diront merci quand ils chercheront un article vieux d un an.

Il ne faut pas se disperser.

Tout va bien, le ciel est bleu, les oiseaux chantent, vous avez plein de catégories et autant d’articles… Stop! L excès de catégories a dégoûté vos lecteurs. Bon j’exagère mais je trouve qu’a multiplié les catégories on se disperse, on oublie la ligne éditoriale du blog, son identité (que de grand mot). J’ai récemment publié deux articles sur la sortie des bandes annonces d’Iron Man 2 et Tron Legacy sous une catégorie « Cinéma », ce n’est pas pour autant que je vais me mettre à discourir sur les films que je vois!

Et les mots-clés dans tout ça ?

Les mots-clés n’ont pas le même rôle, le même sens qu’une catégorie, catégoriser c’est classifier l’article dans la structure du blog. Les mots-clés sont des indicateurs qui permettent de préciser, d’affiner le contenu de l’article. Et accessoirement ils servent au référencement de votre blog de manière significative, en tout cas plus qu’une catégorie.

Pour conclure

Une analyse rapide des différents pavés de cet article devrait vous indiqué de quel coté mon cœur balance, je pense que les catégories qu’on utilise dans un blog doivent découlé du but du blog. Mais il ne faut pas être non plus trop rigide, un blog peut évoluer et par conséquent son organisation également. Il est donc, à mon avis, important de bien définir les catégories car elles vous serviront de guide mais de se laisser tout de même une certaine marge de manœuvre.

Qu’en pensez-vous ?