html5

The future is near

HTML5 Video – La Guerre des Codecs

Non, ce n’est pas le titre du prochain box office, mais bien la triste réalité avec HTML5 aujourd’hui. Pour ceux qui ne suivent pas HTML5, la spécification est pratiquement complète et il ne manque vraiment pas grand chose pour qu’on puisse justifier de faire le grand saut vers ce langage prometteur.

Il reste encore certains trucs sur lesquels ils doivent s’entendre et le codec à utiliser pour l’utilisation de la vidéo (<video>) fait parti de ce qui n’est pas coulé dans le béton.

En effet, il existe actuellement la guerre entre 2 codecs : H.264 et Ogg Theora Codec.

H.264

Le codec coûte 5 millions/année (oui oui) et il est utilisé par Apple (Safari) et Google (Chrome)

OGG

Codec open source actuellement utilisé par Firefox et Opera.

Microsoft dans tout ça? À ce jour, nous ne savons toujours pas vers quel codec ils vont se tourner.

Bon, le choix n’est pas très difficile à faire. OGG devrait être adopté par tous et l’histoire se terminerait là, mais ça ne semble pas être aussi simple. Google semble dire que le Ogg Theora Codec n’est pas encore tout à fait au point et qu’il est préférable de se tourner vers H.264 pour l’instant. Si vous vous souvenez, l’année dernière Google a acheté On2 Technologies qui est une importante compagnie créant de la compression vidéo de haute qualité. On2 Technologies a créé le VP3 Codec qui est la base du Ogg Theora Codec. Étrange? Google fait rarement quelque chose pour rien.

Il est clair pour moi que Google ne veut pas utiliser le codec Ogg puisqu’ils doivent être en train d’en développer un qui sera également open source. Nous risquons d’en savoir plus à ce sujet en 2010.

Post to Twitter Tweet This Post

Mes “résolutions” 2010

Bon voilà, je me lance moi aussi dans les “résolutions” que je vais tenter de tenir tout au long de l’année 2010…

1. Mes amis – Une des choses les plus importantes pour moi sont mes amis et mes proches. Au cours de la dernière année, j’ai certainement délaissé certains amis pour x et y raisons. Je me donne donc comme résolution de passer plus de temps avec eux.

2. Moi – Peut-être que ça va sembler contradictoire avec la première, mais cette année, je veux prendre encore plus de temps pour moi (mais pas en délaissant les autres…). Je vais me faire plaisir par toutes les bonnes choses de la vie. Je m’engage à profiter de chaque moment à fond.

3. Le projet X – Je travaille sur un très gros projet avec deux amis et ce projet va se pointer le bout du nez au cours de l’année 2010. Je ne peux malheureusement pas en parler, mais ça va se retrouver sur le Web! Ce projet est une des mes priorités et il est certainement un des plus importants de ma vie jusqu’à maintenant. Je m’engage à bien le faire avancer avec l’aide de mes collègues.

4. Le projet Y – J’ai déjà mentionné que je n’avais pas de vie? Mon autre projet que je peux parler un peu plus librement est celui avec 3 de mes bons amis (hello guys). Seulement pour “teaser” quelque peu, il s’agit d’une association avec des amis qui sont également pigistes. D’ici environ 1 mois, vous en aurez des nouvelles. Je veux vraiment bien mener à terme ce projet avec mes amis. Notre crédibilité en dépend.

5. Compétences – Je me défini comme un designer Web et développeur CSS. J’ose prétendre bien me débrouiller en design Web et CSS puisque j’adore ça. Par contre, j’aime aussi beaucoup l’ergonomie. Cette année, je veux continuer de m’améliorer de ce côté pour devenir de plus en plus crédible. Je m’engage à terminer mes livres sur ce sujet qui me passionne au plus haut point. HTML5 + CSS3 sont évidemment aussi sur quoi je vais continuer de lire tout au long de l’année.

6. Travail – Je suis présentement pigiste qui prend des contrats de design Web et d’intégration XHTML/CSS. Pour l’instant, j’ai la chance de vivre en faisant ce qui me passionne. J’ai également la chance d’avoir de très bons clients qui m’apportent et m’apprennent beaucoup. Je souhaite continuer d’entretenir d’excellentes relations avec mes clients et d’en avoir plusieurs nouveaux!

7. Voyage – Je n’ai pas beaucoup voyagé jusqu’à maintenant et j’aimerais fort bien faire un voyage au cours de l’année 2010. Seul ou avec des amis, je verrai ce qui conviendra le mieux…

Je ne suis pas très adepte des résolutions, mais je crois que le plus important est de se rappeler justement ce qui est important pour nous. Les points mentionnés plus haut m’aideront à être encore plus fier de cette nouvelle décennie qui part du très bon pied.

Bonne année 2010 17 jours en retard.

Post to Twitter Tweet This Post

La technique @font-face (1 de 2)

Certains utilisent sIFR, d’autres utilisent Cufon et d’autres préfèrent @font-face en CSS. Le but de ce billet n’est pas de vanter une des techniques en particulier, mais plutôt de vous décrire la technique ­@font-face qui est à mon avis, quelque peu délaissé. Cette technique pourrait par contre être de plus en plus utilisée avec l’utilisation de CSS3.

@font-face n’est pas une nouveauté de CSS3. Cette technique était déjà présente avec CSS2 et nous pouvions même l’utiliser avec la version 5 d’Internet Explorer. Le problème est qu’elle prenait seulement en compte les polices ayant le format .eot et les autres navigateurs, à l’époque, avaient décidé de ne pas utiliser ce format.

@font-face est une propriété CSS qui est prise en compte par Firefox depuis la version 3.5 (donc il y a peu de temps…) ce qui peut expliquer le pourquoi qu’elle n’est pas encore la plus populaire à l’heure actuelle.

Comme sIFR et Cufon, elle apporte l’avantage que les utilisateurs d’un site Web n’ont pas à avoir les polices utilisées sur le site Web. Par exemple, je pourrais décider que mon texte est uniquement écrit en Futura et même si vous n’avez pas cette police d’installé sur votre ordinateur, vous verriez pareil l’affichage avec le texte en Futura.

Cette méthode ne requiert également aucun code JavaScript comparativement à Cufon et sIFR. Nous n’avons donc plus besoin de nous soucier si JavaScript est activé ou non.

Jusqu’à maintenant, cette technique semble avoir que des avantages, mais elle n’est évidemment pas parfaite. En effet, en utilisant la technique @font-face en CSS, nous exposons facilement à la vue de tous le téléchargement de nos fontes. En regardant notre code source, n’importe qui peut voir l’emplacement du fichier et le télécharger. Ce n’est pas un problème pour des fontes gratuites, mais dû moment que ce sont des fontes payantes, nous tombons dans l’illégalité.

Prenons par exemple une personne achetant son pack Helvetica. Il utilise Helvetica Neue pour son texte et utilise @font-face. Je me rend sur le site Web en question, analyse quelque peu le code source et en moins d’une minute j’ai maintenant Helvetica Neue comme nouvelle fonte sur mon ordinateur.

La ligne peut être mince quant à l’utilisation de cette méthode. Elle peut être fort utile si vous utilisez des fontes gratuites qui ne se retrouvent pas nécessairement sur l’ordinateur de vos visiteurs. Par contre, il faut rester très vigilant pour ne pas tomber dans l’illégalité.

Dans le prochain billet, je montrerai un exemple d’utilisation de la technique @font-face.

Post to Twitter Tweet This Post