Nous savons aujourd’hui que le H1N1 était une fausse alerte et que la pandémie annoncée n’a pas eu lieu. Mais il existe un autre genre de danger viral dont la souche est méconnue mais les effets, dévastateurs. Voici le palmarès des dix dérapages viraux du Web, le panthéon des imbécilités contre lesquelles on se ferait vacciner tout de suite…

1. Information vitale… non vérifiée
Un vieux classique qui date des débuts du courriel mais qui ressurgit à chaque nouvelle génération d’internautes. Un(e) ami(e) vous transmet un long message contenant une information «qui peut sauver des vies», ou encore d’un nouveau virus «qui détruira toutes vos données». Outre son côté fortement improbable, il est clair que cette information ne repose que sur la crédulité de ceux qui la partagent. Mais comment savoir si c’est un canular?, demande le peuple. Eh bien mes amis, il existe des sites pour ça!

2. Lip dub
Déjà mentionné dans mon billet sur la crise de créativité, le lip dub est l’exemple même de l’idée géniale qui devient insupportable à force d’être reprise. Dans cette catégorie, on peut même lister ce qu’on ne veut plus jamais jamais voir ni entendre : une millième exploitation de I got a feelin’ (Black Eyed Peas), des sourires gênés qui semblent dire «je me ridiculise publiquement parce que c’est bon pour ma carrière», une mise en scène pataude digne d’un camp de vacances sans budget, une caméra qui bouge pour «faire jeune», des logos subtilement brandis pour promouvoir la compagnie/l’école, et, surtout, l’absence totale de nouvelle idée.

3. Image de chaton
Avant le Web, les gens savaient-ils que les chatons existaient? C’est ce qu’on se demande à la vue des millions de photos de chatons qui s’échangent sur la toile. En 2010, il faudrait vraiment que votre photo de minou soit incroyablement originale/créative/absurde pour qu’elle étonne encore quelqu’un. Désolé.

4. Chaîne de lettres
Comme beaucoup de canulars ou d’arnaques virtuelles, les chaînes de lettres sont apparues avec la démocratisation des courriels. Elles s’en prennent directement à votre bon cœur, à votre culpabilité, à vos peurs ou à votre cupidité. Un jour, on vous demande de sauver une fillette atteinte d’une maladie rare. Le lendemain, vous êtes sur le point de gagner un million de roupies à la loterie espagnole (les plus cultivés d’entre vous ont repéré la fraude). Et le jour suivant, c’est une mère de famille qui vous demande de retrouver sa fille de trois ans en vous envoyant sa photo, prise en 2002. Mais le meilleur est toujours à la fin, dans le paragraphe où sont détaillées les menaces qui pèsent sur vous si jamais vous ne transmettez pas le message. De nombreuses parodies sont apparues au cours des années et leurs auteurs s’en donnent à cœur-joie : si tu n’envoies pas ce message à 8500 personnes dans les dix prochaines secondes, un dinosaure venu de l’espace viendra bouffer toute ta famille demain à 17 h 30…

5. Blague au format PowerPoint
La meilleure façon de perdre vos amis? Envoyez-leur un courriel avec, en pièce jointe, un fichier PowerPoint bien lourd. Une fois ouvert, ce diaporama racontera une blague usée, chaque «slide» étant surchargée de photos floues et de cliparts animés créés en 1998 par des informaticiens dépressifs. Il est important que chaque image illustre ce qui est écrit juste à côté, au cas où vos lecteurs ne comprendraient pas le sens des mots «maison» ou «canard». Votre présentation «multimédia» devra s’étirer le plus possible pour que même le plus lent des lecteurs ait deviné le punch avant qu’il arrive. Une musique électronique quétaine pourra avantageusement accompagner l’œuvre. Et bien sûr, vous prendrez soin d’afficher votre nom en guise de générique de fin, pour que vos amis vous associent jusqu’à la mort au moment magique que vous venez de leur faire vivre.

6. Pétition
Je n’ai rien contre les pétitions, qui sont un moyen efficace de faire entendre une opinion collective. Par contre, quand vous recevez par courriel une pétition au bas de laquelle on vous demande d’inscrire votre nom avant de la transmettre à tous vos contacts, il est de votre devoir de vous questionner : si tout le monde en fait autant, comment pourra-t-on compiler tous les noms? Poser la question, c’est y répondre. Rassurez-vous, il existe maintenant des sites qui résolvent ce problème.

7. Rick Astley
Ai-je besoin de m’expliquer? Si vous insistez vraiment, cliquez ici.

8. Vidéo en reprises
Au chapitre du tapage-sur-les-nerfs, n’oublions pas le vidéoclip d’une minute qui montre douze fois la même seconde, au ralenti, en avant, en arrière, en image fixe, agrandie, avec des commentaires, avec des bruitages, etc. L’origine de ce genre de production est à chercher quelque part entre la télé-poubelle américaine et les abrutissants jeux télévisés japonais, mais le résultat est généralement un chef-d’œuvre de sensationnalisme.

9. Message humanistico-existentiel
Juste après la pornographie, la pop-psycho semble être la plus grande bénéficiaire du développement d’Internet. En plus de l’arsenal de sites, de quizz et autres forums peu recommandables consacrés au «nouvel âge», l’internaute tombe parfois sur des messages existentiels transmis par courriels ou via des réseaux sociaux. Dans un style pompeux à souhait, ces messages criblés de fautes d’orthographe martèlent ce que vous soupçonniez déjà, à savoir que les amis sont plus importants que l’argent, ou que le pouvoir de la volonté est infini. Notons au passage que c’est souvent dans ce contexte qu’on observe les expérimentations typographiques les plus pathétiques. Inévitablement, la métaphore cucul se conclut par un «transmettez ce message à vos amis pour qu’ils sachent que gna-gna-gna…». Juste au cas où vous auriez encore des amis…

10. Vidéo «authentique»
Un ami vous envoie un clip vidéo «capté sur le moment» qui montre quelque chose de tellement incroyable que vous le transmettez immédiatement à tout votre réseau. Malheureusement, deux minutes de recherche vous auraient permis d’apprendre que cet exploit aérien est une publicité pour une marque de vêtements, que cette incroyable glissade est une création de Microsoft ou que les téléphones cellulaires n’éclatent du maïs que dans les vidéos d’un fabricant d’accessoires de téléphone.

* * *

Profitons de cette occasion pour rappeler qu’en 2010, toutes les vidéos – sauf peut-être celles que vous tournez vous-même – se retrouvent sur YouTube ou autre plateforme du même genre. Même chose pour les photos : il y a un milliard de sites pour ça. On n’envoie donc plus ces grosses pièces jointes qui engorgent nos poubelles, mais des HY-PER-LIENS.

Ce billet est une simple traduction d’un billet d’Antonio Lupetti rédigé en 2008 mais encore tellement pertinent : CSS coding: semantic approach in naming convention . En caractères italiques gras, mes commentaires!

Les conventions de nommage en CSS c’est un sujet chaud (Pas assez chaud à mon avis car avec les Frameworks CSS, ces mêmes questions se doivent d’être soulignées…). Dans ce billet, je veux illustrer quelques bonnes pratiques pour avoir une approche sémantique plutôt qu’une approche structurale lorsque vient le temps de faire le choix des noms de nos classes CSS. L’exemple utilisé pour illustrer mon propos est un modèle typique et populaire d’une mise en page sur 3 colonnes.

À la toute fin du billet, une liste d’articles à lire sur ce même sujet et une liste de Frameworks pour faciliter votre développement CSS (Pour ma part je n’aime pas ces Frameworks car pour permettre leur flexibilité, le nom des classes est souvent très peu sémantique et l’ajout de chiffre pour numéroter les zones est très répandu… beurk…)

Approche sémantique versus l’approche structurale pour le choix des noms de classes en CSS

En général, l’approche sémantique permet de définir le nom des classes en considérant sa signification, son sens par rapport à la page, indépendamment de sa position ou autres propriétés spécifiques qui constituent l’approche structurale. Des exemples d’approche structurale sont : left-bar, red-text, small-title… (Un truc serait pour faire la différence est de ce demander s’il est possible de faire mentir le nom d’une classe simplement en changeant quelques règles CSS pour cette classe… Ainsi, une classe « bleu » peut facilement être dans le champ simplement en changeant la couleur pour rouge. Une classe « zone-gauche » peut être dans le champ si on déplace cette zone à la droite. Par contre, une classe « menu » ou « entete », c’est plus difficile à faire mentir en changeant une règle CSS).

Voyons ensemble un exemple :

… et imaginons maintenant notre modèle si on change la position des zones de notre page. Si vous utilisez une approche structurale (1), il devient préférable de changer le nom des classes dans le code car la position des zones dans l’illustration (3) inverse la gauche et la droite affichées en (1). En utilisant une approche sémantique, ce problème ne se pose pas (4) :

En d’autres mots, en utilisant une approche sémantique, il est envisageable de changer complètement la disposition des éléments d’une page sans pour autant devoir changer le nom des classes CSS.

Quelques bonnes pratiques…

Avant de commencer, j’aimerais suggérer 2 règles simples pour développer du code CSS clair :

1. Utilisez les minuscules pour nommer vos classes et utilisez le « - » ou une lettre majuscule pour les noms de classe de plusieurs mots (ex. « main-content« , ou « mainContent).

2. Optimisez le code CSS en ajoutant une classe seulement sur l’élément principal et en utilisant les balises standards HTML pour les sous éléments (h1, h2, p, ul, li, blockquote,…). Par exemple, n’utilisez pas cette approche :

…utilisez plutôt ceci :

Exemple d’une approche sémantique pour une mise en page sur 3 colonnes

Regardons un exemple simplifié qui illustre comment utiliser une approche sémantique pour une mise en page sur 3 colonnes :

Le CSS d’une telle approche pourrait ressembler à ceci :

1. Container
« #container » est la section qui contient tous les éléments de votre page et permet de contrôler la disposition du contenu dans l’espace disponible dans la fenêtre du navigateur. Pour cette section, les noms suivants pourraient également être de bons choix : « wrapper« , « wrap« , « page« .

2. Header
« #header » c’est l’entête de votre page Web. En général, l’entête inclut le logo du site et quelques éléments supplémentaires. Pour cette section, les noms suivants pourraient également être utilisés : « top » (J’aime pas), « logo » (Pas bon si ça contient plus que le logo), « page-header » (ou pageHeader).

3. Navbar
« #navbar » représente la barre de navigation horizontale (Pas nécessairement horizontale par contre…) standard. Pour cette section, les noms suivants auraient également pu être utilisés : « nav », « navigation », « nav-wrapper ».

4. Menu
« #menu » contient des liens et menu. Pour cette section, les noms suivants pourraient être utilisés : « sub-nav « , « links« . (En fait, pour ma part, je trouve que #navbar c’est souvent assez… une liste de lien sous #navbar c’est nécessairement le menu et si on est tenté de mettre autre chose dans le #navbar, c’est que le nom #navbar est alors mal choisi…)

5. Main
« #main » est la section principale d’une page du site. S’il s’agit d’un blogue, c’est la section qui contiendra vos articles. Pour cette section, les noms suivants pourraient être utilisés : « content« , « main-content » (or « mainContent »),

6. Sidebar
« #sidebar » contient du contenu d’ordre secondaire comme une liste de liens vers les derniers articles, un court texte descriptif à propos du site, de la publicité… Les noms suivants pourraient être pertinents : « sub-nav« , « side-panel« , « secondary-content« .

7. Footer
« #footer » contient généralement des informations supplémentaires à propos du site Web. Un autre nom pourrait être « copyright » (Je ne sais pas pour vous, mais plus souvent qu’autrement, mes footers ont plus que le copyright…).

Si vous avez des suggestions de noms sémantiques de classes, n’hésitez pas à laisser un commentaire.

J’ai pris la peine de traduire ce billet car il est important de se conscientiser sur le nom des classes que nous utilisons pour nos CSS. De bons noms assurent la pérennité de notre code, donc par le fait même sa valeur. Tout n’est pas à mon goût dans les propositions mais il ne faut pas non plus virer fou avec le concept…

Le HTML5 est une série de recommandations faites par le W3C qui est fait pour les navigateurs. Le W3C fait ces recommandations afin que tous les navigateurs affichent de la même manière les éléments standards d’une page web. Le HTML5 amène plusieurs nouveaux éléments, mais cet article va se concentrer sur le vidéo.

Beaucoup de gens voient dans le HTML5 la fin du Flash, notamment dans le nouvel élément video et audio. Pour la première fois les développeurs peuvent avoir accès à des outils gratuits et non-propriétaires pour faire afficher de la vidéo et du son dans leurs pages/applications web. Le W3C est tombé sur épine par contre, afin de donner aux vidéos un poids « normal » qui pourrait être utilisé sur internet, les vidéos devaient être compréssés. Personne ne veut vraiment attendre 20minutes pour regarder un clip sur YouTube. Alors le W3C, avec l’accord des principaux navigateurs, a dû choisir un Codec qui permettrait de compresser les vidéos.

Le problème est que la qualité devait être au moins comparable à celle de Flash et le codec ne devait pas être propriétaire. Or, les codecs qui étaient disponibles lors des négociations étaient soit propriétaires, soit avec une licence nébuleuse qui pouvait être changé quelques années plus tard.

Il était une fois…
Il y déjà un peu plus de 15 ans les navigateurs avaient adoptés/supportés le format d’images GIF. Après avoir pris cette décision, le format GIF s’est vu attribué des brevets au niveau de l’algorithme de compression et la compagnie derrière les brevets, Unisys, a commencé à charger pour des licences commerciales.

Le W3C ne voulait vraiment pas répéter l’erreur et une petite chicane s’est produite entre les compagnies responsables des navigateurs. Les navigateurs qui ont les sous poussent pour l’utiliation du codec H.264/MPEG, payer la licence et ne plus avoir de surprise. Les navigateurs qui ont moins de moyens aimeraient mieux aller vers le Théora qui en principe ne devrait pas être soumis à des brevets.

Le W3C n’ayant pas les fonds ni la compétence de créer un codec open source qui pourrait satisfaire les conditions, ils ont laissé le choix du codec au navigateur. Google s’est levé les manches, a acheté une compagnie qui développait un codec (On2), a lancé le projet WebM et a attribué la licence BSD afin que tout le monde puisse l’utiliser gratuitement. Étrangement aux États-Unis, le moyen le plus fiable de savoir si un codec n’a pas de license est de lui en attribuer une licence qui le spécifie.

Étant donné que les recommandations HTML5 ne sont pas encore finalisées, même si les marketeux de ce monde essaient déjà de faire des sous sur son dos, peut-être que le débat du codec sera ré ouvert et un codec précis sera choisi. En attendant, pour nos lecteurs qui ont des navigateurs mis à jour et qui supportent les débuts de spécifications de HTML5, voici un petit vidéo open source « Big Buck Bunny » qui a été réalisé en 2008. On s’est amusé à ajouter un menu contextuel qui liste différend chapitres que nous avons nommés avec coeur. Il y a aussi le magnifique bouton Killing Spree qui met en boucle les meurtres du petit vidéo. Les chapitres sont faits en javascript, mais c’est seulement grâce aux spécifications du W3C que nous pouvons interfacer aussi facilement avec le vidéo.

À lire un jour avant de se coucher :

• Une histoire de… GIF
• Une histoire de… chicane de navigateurs
• Une histoire de… codec gratuit par Google(WebM)

J’étais en train de préparer un rapport de Google Analytics et je comparais mes données à celles d’il y a 15 jours… Me voilà donc en comparaison de la source de trafic.

Hum je regarde vite vite mes copie d’écran et me dis que j’ai perdu un peu de trafic de moteur de recherche. Puis en écrivant mon analyse et en reprenant les chiffres je me rends compte que c’est plutot l’inverse… J’ai gagné 7%, comment ce fait-il que j’ai cru voir l’inverse ???

La réponse est simple. Au lieu d’attribuer une couleur à un type de source Google a attribué la couleur au %.

Alors ouvrez-bien les yeux pour ne pas vous tromper.