Warning: file_exists() [function.file-exists]: Unable to access /var/www/sdc/8/6/vingtnotessur//wp-content/uploads in /mnt/105/sdb/8/6/vingtnotessur/wp-content/plugins/podpress/podpress_class.php on line 104
20 notes sur » 2006 » June

Archive pour June 2006

Note sur le GIF

Friday 30 June 2006

Le GIF (Graphics Interchange Format qui signifie format d’échange de graphiques) est encore l’un des formats d’image et d’animation les plus présents sur la toile. Sa force réside dans son algorithme de compression le LZW, qui marche comme un dictionnaire. Le GIF n’enregistre pas directement les couleurs mais crée une palette de 2 a 256 couleurs, chaque pixel sera une référence à une de ses couleurs.

Malheureusement cet algorithme est sous brevet 1, ce qui a permis le développement de formats concurrent “libre” tel le JPEG et le PNG qui sont devenus bien plus performants.

Une question se pose alors, pourquoi le GIF est il aussi présent sur le web. Plusieurs réponses existent : l’habitude et la fainéantise sont les premières, les gens connaissent le GIF et n’ont pas envie d’en changer. La deuxième est le manque d’outils pour les autres formats, par exemple le format MNG (extension du PNG pour les animations) n’est pas supportée par certains navigateurs web (il faut rajouter des plugins pour qu’il soit pris en compte).

Bien que la fin du brevet d’IBM, qui aura lieu d’ici peu risque de redonner au GIF des allures nouvelles (l’image gif est née en 1987 et a été étendu a l’animation GIF en 1989) l’avenir de ce format a long terme est très incertain : beaucoup de nouveaux formats sont sortis récemment et le passage en 255 couleurs se fait de plus en plus désuet.

1 Il était détenu par Unisys est arrivé à expiration en 2003 - 2004 mais IBM détient encore un brevet valide jusqu’au 11 août 2006 aux États-Unis.

Technorati Tags: , ,

Note sur SMIL

Wednesday 28 June 2006

Le SMIL (Synchronized Multimedia Integration Language) est une spécification du W3C.

Il s’agit d’un langage permettant d’inclure de nombreux éléments multimédia au sein d’une page web et de les synchronisés pour obtenir des présentations multimédias.

On peut ainsi, créer des séquences, des événements s’executant en paralèle, … Basé sur le langage XML SMIL se veut ouvert et simplé d’emploi, tout en permettant de mixer du contenu multimédia dans un timing précis.

SMIL dispose de 9 modules spécifiques dans sa seconde version : animation, contrôle du contenu, mise en page, liaison, gestion du temps, synchronisation, effets de transition, les hyperliens et la structure. Autant de modules qui enrichissent SMIL 1.0 afin de rendre le développement plus modulaire.

SMIL 2.0 dispose en plus de profiles particuliers, afin de s’adapter au terminal : SMIL 2 complet ou SMIL 2 basic pour les terminaux portables. Et il s’améliore dans sa version 2.0 en acceptant les metatags afin d’améliorer l’indexation.
Mais alors pourquoi une fois de plus, ce nouveau langage d’animation pour le web est il si peu connu. En réalité, malgré des spécifications très intéressante, SMIL manque de support, et les navigateurs ne l’intègre pas encore en natif, ce qui oblige à télécharger des logiciels/plugins tiers tel que quicktime, Helix, …

Heureusement celà semble changer avec le support de SMIL 2.0 dans internet explorer 5.5. Mais il reste encore beaucoup de chemin, avant de voir s’imposer ce langage qui a coup sur changera la vision de l’animation multimédia sur le web.
SMIL 1.0 spécifications

SMIL 2.1 recommandations

Le W3C recommande SMIL 2.0

Technorati Tags: , , , , ,

WIF - Web Image Format

Tuesday 27 June 2006

WIF décrit un nouveau format d’image couplé à un protocole de transport résolument orientés Web.
Il apporte une qualité de compression comparable a JPEG et offre les possibilités du format PNG.

Mais son atout est surtout une vitesse de transfert au travers de l’Internet jamais égalée !

Tout d’abord observons ses méthodes de compression :

Le WIF encode sur une base de :

- 8 bits pour les niveaux de gris.
- 24 bits pour les “true-colors”.
- 16 bits pour la combinaison du gris et de la transparence (alpha).
- 8 bits supplémentaires si la transparence est appliquée à une image en qualité haute (voir ci-dessous).

Le tout est combiné au sein d’un fichier image fortement compressé :
les données decrivant l’image sont elles même compressée à l’aide de l’algorithme de
codage de Huffman.
Le format définit 5 niveaux de qualité (Maximum, Très élevé, Elevé, Moyen et Bas).

Une particularité du pré-traitement appliqué à l’image est la reconnaissance des zones clefs.
En résumé un algorithme, basé sur la luminosité et l’intensité des couleurs, identifie les zones considérée par la suite comme essentielles à la reconnaissance de l’image par l’humain (les
proportions de celles-ci varient en fonction du niveau de qualité choisi).

Les zones clefs et les non essentielles, définissent deux types de blocs au sein du fichier .wif .
De plus un champs est prévu au sein de ce dernier afin d’y ajouter une adresse réseau permettant l’identification de la
destination lors d’un éventuel transfert sur un réseau supportant les protocoles TCP/IP et UDP, l’Internet le plus souvent.

Cela nous amène à la particularité du format WIF, le mode de transport intégré :

Comme nous l’avons evoqué précédemment, le protocole utilisé pour l’acheminement des images WIF est UDP (User Datagram Protocol).
Une particularité de celui-ci est sa rapidité en comparaison à TCP/IP, cela s’explique par le fait que ce protocole soit en mode non connecté : donc dénué de phase de gestion de la
connection (three-hand-shake), d’accusé de réception et autres systèmes de vérification des
erreurs.

Le handicap est que l’acheminement des données n’est pas sûr (la perte d’un paquet n’étant pas détectée, un fichier peut parvenir incomplet à son destinaire).
Afin de palier à cette lacune le format WIF est conçu pour rendre une image à l’écran même lorsque le fichier la contenant présente des parties manquantes.
De plus, dans l’optique d’assurer une qualité minimum de l’image, les parties clefs (voir plus haut) sont accompagnées de contrôle d’intégrité afin d’assurer leur arrivé quoi qu’il arrive (le recepteur en obtient la liste dès le début du transfert).
Ainsi WIF s’affranchie des pertes de temps dues aux accusés de réception et aux mises en place de connections.
Puis le manque de fiabilité engendré est compensé par un contrôle des données interne au programme et appliqué uniquement sur les zones essentielles de l’image transférée.

Malheureusement la technologie Web Image Format n’a, à ce jour, pas trouvé de parrain pour la finaliser et l’étendre au sein du Web. Le W3C s’est penché sur la question mais n’a, à ce jour, rien publié à ce sujet.

Néanmoins les qualités de compression et de rapidité de transfert pourraient en faire un acteur de premier plan à une époque où les technologies mobiles connaissent un bel essor !

Technorati Tags: , , , , ,

EVA : Extended Vector Animation

Monday 26 June 2006

EVA (Extended Vector Animation) est un format de fichier graphique vectoriel sur le web. Il a été développé par Sharp Corporation et diffère des autres formats vectoriels car seuls les changements des vecteurs dans le temps sont enregistrés plutôt que de mémoriser les informations correspondant à chaque frame.

Les avantages ? Tout d’abord les bénéfices de l’imagerie vectorielle : des fichiers de taille réduite car il n’est pas nécessaire de mémoriser chaque pixel. De plus, la taille du fichier restera la même quelque soit la taille d’affichage de l’animation. Autre avantage : EVA ne conserve que les frames clés (celles qui contiennent des changements) et leur instant d’apparition dans l’animation. Lors de la lecture, le nombre de frames affichées dépendra de la puissance de la machine. Ainsi, un PC de faible puissance pourra très bien générer une animation fluide pour un ordinateur de dernière génération.

Pour ce qui est de la compatibilité avec les formats multimédia existants, on notera entre autres :

  • la lecture des fichiers images (BMP / JPEG / GIF / PNG)
  • la conversion des fichiers WMF en EVA
  • le contrôle du son en fonction des scènes (WAVE / MIDI)
  • la possibilité de générer en bitmap (BMP / JPEG / GIF)
  • la possibilité de générer dans d’autres formats d’animation (GIF / AVI)

Le format EVA est surtout utilisé au Japon et de multiples versions du logiciel EVA Animator ont été vendues et inclues en standard sur les ordinateurs portables Sharp japonais. Il est tout particulièrement adapté à des pages d’accueil, des guides ou encore des présentations.
Petit ordre de comparaison avec Flash : des fichiers 13 fois plus petits ! Une animation de 10 minutes avec EVA pèse environ 500 KB alors que la même animation en Flash ferait plusieurs MO.
Malheureusement, il est a noter que le logiciel EVA Animator ne fonctionne que sur les versions japonaises de Windows et qu’il n’a pas encore été porté pour les versions anglaises. Le plugin quand à lui est disponible pour Windows ou Macintosh, mais également en version japonaise.

En conclusion : EVA représente une alternative intéressante à Flash, qui se veut très simple d’utilisation, mais pour le moment réservée aux japonais. En outre, l’implantation du plugin au sein des navigateurs, sans commune mesure avec celui de Macromedia, fait de EVA un format alternatif léger et intéressant, mais pas encore un concurrent de Flash.

Technorati Tags: , , , , , , , , ,

Note sur JPEG 2000

Friday 23 June 2006

Comment ne pas parler du JPEG 2000 sur un blog traitant de 20 notes sur les futurs formats d’images. Ce format datant desormais de 2000 / 2001, est considéré a tord comme une évolution du format jpeg. Il s’agit en réalité d’un algorithme de compression totalement différent du jpeg.

Le jpeg se basait sur un algorithme utilisant les DCT (Discrete Cosine Transform) tandis que le jpeg 2000 se base sur le principe des ondelettes, ce qui permet de nouvelles possibilités, et un algorithme beaucoup moins destructeur de l’image. Pour résumé un meilleur rendu, pour une taille égale.

De plus, le jpeg 2000, qui s’appuie sur une norme en 12 points, amène de nouvelles possibilitées telles que la multirésolution : l’image pourra être lue à une résolution intermédiaire afin de diminuer les temps de chargement. Il est possible aussi de déterminer des régions à dégrader plus ou moins : c’est le Region of Interest. Enfin, une correction d’erreur lors de l’émission de l’image dans un flux est possible.

Bien sur le jpeg 2000 intègre aussi une gestion du copyright.

Mais alors pourquoi ce format qui paraît tellement novateur, n’est il pas utilisé sur le web et dans la plus part des applications ?

Il s’agit d’une raison de coût, actuellement il n’existe pas réellement de logiciel libre afin de réaliser la compression/décompression jpeg 2000 qui est un format libre. Donc il faut s’acquitter d’une license par exemple pour un plugin photoshop. Mais heureusement certains sont en développement tel que jasper ou J2000, et il ne restera plus qu’a les inclure afin de profiter du jpeg 2000 sur le web.

Technorati Tags: , , ,

Image matricielle contre image vectorielle

Thursday 22 June 2006

Les principales images et animations du web sont divisées en deux grandes catégories : Matricielle (JPEG, GIF, PNG, WMP…) et Vectorielles (Flash, PDF, SVG…).

L’image Matricielle :

Comme son nom l’indique, il s’agit d’une image représentée par une matrice, ou tableau à plusieurs dimensions (2 pour une simple image : x, y; 3 pour une image animée : x, y, t). Ce type de format s’adapte assez bien à l’écran, chaque point représentant un des pixel de notre écran. Elle perd de la qualité lors du redimensionnement et sa taille est élevée mais permet de stocker tous les types d’images.

L’image Vectorielle :

Contrairement à l’image matricielle, l’image vectorielle contient les différentes formules géométriques permettant le tracé. Par exemple pour afficher l’image d’un ballon rouge on retiendra qu’il faut un disque rouge de centre X Y et de rayon R. Il y a de multiple avantage à cette technique : la taille de l’image est directement liée à sa complexité, il est adaptable à la plus part des périphériques (les positions étant relatives) ce qui est intéressant pour le WAP par exemple. Par contre il est mal adapte aux images quelconques et peut avoir des difficultés à traiter une partie de l’image il ne convient donc pas pour les photographies ou aux images ayant un dégrade complexe.

Quel avenir pour chacun d’eux ?

Jusqu’à l’apparition du Flash il n’existait que des images matricielles sur le web, Il est maintenant bien implanté, et a ainsi ouvert la voie a l’image matricielle sur le web. Les différentes applications de ces deux formats laissent à penser qu’il existe une place pour chacun d’eux : les matricielles pour les photographies et autres images assez complexes, et les vectorielles pour les images plus simples facilitant ainsi le chargement des images. De plus cela semble se confirmer avec l’arrivée derniers formats : SVG pour les vectorielles et WMP pour les matricielles.

Technorati Tags: , , , ,

Note sur SVG part2

Wednesday 21 June 2006

Continuons notre petite présentation de notre format svg, en donnant les
aspects techniques de ce langage.

Tout d’abord, la première question à se poser est de savoir comment afficher
un fichier SVG. On peut utiliser un viewer SVG ou bien un navigateur de
capable de lire le SVG tel que firefox 1.5 ou version ultérieure. Un des
avantages d’utiliser firefox 1.5 est que l’on peut combiner le XHTML et le
SVG. Un des inconvenients est que l’on ne peut pas utiliser les animations
(ou pas encore …).

SVG par l’exemple

Avant de commencer, si vous n’avez aucune notion sur le xml, je vous
conseille de jeter un oeil sur quelques tutoriels pour connaitre les notions
de base.

Maintenant, nous allons implémenter le célèbre “helloWorld”

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">

<svg>

<rect x="50" y="50" rx="5" ry="5" width="200" height="100"

style="fill:#CCCCFF;stroke:#000099"/>

<text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">

HELLO cher visiteur

</text>

</svg>

Regardons de plus pres notre code.

<?xml version="1.0" standalone="no"?>

On effectue une déclaration XML standard en définissant le standalone à no.
On doit donc définir la DTD.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">

Le réel travaille commence maintenant. On commence par définir la racine du
fichier qui est ““. On définit un objet rectangle pour pouvoir placer
notre texte “HelloWorld”.

<rect x="50" y="50" rx="5" ry="5" width="200" height="100"

style="fill:#CCCCFF;stroke:#000099"/>

Le code est très simple à comprendre. Le “rect” sert à définir l’objet
rectangle. On définit ensuite la position du supérieur gauche grâce à x et à
y. On définit ensuite la longueur et la largeur de notre rectangle grâce à
width et height. On définit ensuite le style de notre rectangle en donnant
la couleur du trait (”stroke”), et la couleur de remplissage (”fill”).

<text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">

HELLO cher visiteur

</text>

De la même manière, nous allons placé un text bleu dans notre cadre grâce
aux quelques lignes de codes ci-dessus.

On finit bien sur par fermer notre balise ““.

Voila comment faire un “HelloWorld” que je qualifierais de stylisé. On a vu
comment mettre en place notre svg, comment mettre un rectangle et ensuite
mettre du texte.

Ceci n’est pas un tutoriel, il ne sert qu’à montrer la faciliter de ce
langage. Pour plus d’information, il existe de nombreux tutoriels traitant
ce sujet et je vous conseil vivement d’y jeter un oeil (google est votre ami
…).

Technorati Tags: , , ,

Contrôle d’Images Flex

Tuesday 20 June 2006

Flex est un ensemble d’outils de développement et de déploiement Web créé par la société Adobe.

Cette technologie a pour but premier de faciliter la création et l’accès aux “Web Services” grâce à un interfaçage basé sur le sur le socle d’exécution Flash Player, présent sur plus de 90% des postes pour les principaux navigateurs et systèmes d’exploitation. Flex permet donc de générer des applications Flash en suivant un modèle de développement familier aux développeurs Web standards (Java, C# ou encore php).

L’intérêt par rapport aux technologies ayant des applications similaires (Ajax, XUL et autres) est d’être totalement indépendant du navigateur client. D’autre part la possibilité de pouvoir exécuter de véritables programmes offre à cet outils un potentiel d’évolution et des performances rarement égalées.

Une particularité notable du système Flex réside dans les fonctionnalités intégrées pour la gestion d’images et autres supports multimédia.
Tout d’abord les formats usuels du web sont pris en charge (’gif’, ‘jpeg’ et bien entendu ’swf ‘ de Flash) mais également les plus récents (’png’, ‘svg‘).

De plus deux politiques de gestion des images en mémoire sont offertes aux développeurs qui peuvent choisir entre :

- Charger leurs images et autres ressources multimédia à la compilation, stockant ainsi les données au sein même de l’application transmise aux navigateurs clients.
Cela offre la possibilité d’intégrer des animations lourdes (en terme d’espace mémoire occupé) tout en conservant un affichage fluide sur tout type de machines.
Seul bémol, l’obligation pour le développeur de recompiler l’ensemble de la page s’il souhaite en modifier une ou plusieurs images (la gestion du chargement étant alors réajustée).

- Poser de simples références à des ressources distantes (le plus souvent par simple requête HTTP) afin que leur contenu soit directement récupéré par le navigateur client au chargement ou lors d’évènements programmés. Les interfaces ainsi développées, en plus d’être légères en mémoire, peuvent alors devenir de
simple schéma de structuration des éléments (à la façon d’un template). Le contenu de ceux ci évoluant en fonctions des données présentes à l’adresse indiquée par le développeur (celle-ci pouvant être elle même un autre web service…).

Note : ces deux politiques ne peuvent être combinées au sein d’une même application (pour plus d’informations référez vous à l’utilisation de l’option de compilation ‘use-network’ décrite dans le manuel de compilation Flex).

Un atout qui pourrait donner à Flex une expansion prochaine est sa capacité à gérer, en temps réel, les flux de données (notament en ce qui concerne la retouche
d’images). Par son exploitation des possibilités offertes par l’unité de traitement graphique en temps réel de Flex, la suite développée par Matrox (Matrox RT.X2) illustre les possibilités de traitement et d’effets sur les images (Tournés de page, Pan & scan, Masques temps réel…).

Liens utiles :
Les dernières nouveautés de Flex
Quand Flex rejoint Ajax (FABridge).
Le manuel de développement Flex 2.0 par Adobe (et plus précisément la section sur le traitement d’images).

Technorati Tags: , , , , , , ,

On2 VP6/VP7 & Macromedia Flash 8

Monday 19 June 2006

Dans le monde de la vidéo en streaming, l’un des principaux problèmes est qu’il faut en général télécharger et installer un logiciel spécifique avant de pouvoir accéder au contenu multimédia, ce qui représente une contrainte souvent rédhibitoire pour le grand public. La solution : diffuser à travers des technologies multi-plateformes déjà bien implantées telles que Java ou Flash.

C’est début Avril 2005 que On2 Technologies, développeur des codecs vidéos VP6 et VP7, a annoncé l’attribution des licences pour Macromedia Flash (Communiqué de presse : http://www.on2.com/completepr/?id=262). Bonne opération pour On2 qui avait été écarté de la course par les 3 grands (Real, Windows, Apple). L’utilisation des ces codecs restait jusqu’alors principalement limitée au offline et ce fut donc l’occasion pour On2 de se positionner comme outsider du média en ligne.

L’une des grandes nouveautés du VP6 associé à la technologie Flash 8 : la prise en charge de vidéo avec transparences alpha, permettant d’intégrer une personne tournée sur fond vert dans un décor graphique de son choix, le tout sur le web avec un poids de fichier optimisé. Les déclinaisons de ce type de films ne se sont pas fait attendre et on croise déjà de tels contenus vidéo Flash dans des programmes institutionnels sur internet avec des intervenants sur un plateau virtuel pour le lancement de reportages par exemple.

Flix Pro 8.5

Avec la nouvelle version de son logiciel Flix Pro 8.5, l’éditeur entend éviter la préparation de l’incrustation graphique dans un logiciel trop onéreux, et intègre désormais un outil dédié dans son logiciel à 250$ environ. La vidéo tournée sur fond vert y est donc travaillée pour isoler le personnage et qu’une couche alpha en soit créée. L’outil gère ensuite l’encodage en VP6 de cette vidéo avec sa couche alpha, pour intégration dans un contenu Flash.

On2 a de nouveau crée la surprise il y a quelques semaines en annonçant la déclinaison du Flix Engine (moteur de rendu) pour Linux (Communiqué de presse : http://www.on2.com/completepr/?id=348). Même si son prix (2500$ par serveur) ne reste pas accessible à toutes les bourses, il a de grandes chances de séduire les entreprises qui ne travaillent que sous cet environnement.

Interview du PDG de On2 : http://www.flashmagazine.com/1128.htm

Technorati Tags: , , , , , , , , , ,

Windows Media Photo - WMP

Friday 16 June 2006

Microsoft a présenté au Windows Hardware Engineering Conference (WinHEC 2006) un nouveau format d’image le WMP ou Windows Media Photo.

Ce format d’image a pour but de concurrencer le jpeg et son évolution le jpeg2000 sur lequel nous reviendrons dans un prochain article.

Microsoft annonce un poids divisé par deux pour une même qualité de rendu et un ratio de compression pouvant atteindre 1/25.

Dans une période ou les propriétaires du brevet jpeg : Forgent attaque les différentes firmes pour obtenir des royalties, le nouveau format de microsoft apparait comme un challenger interressant.

Encore faut-il attendre les informations sur la licence de ce format, car pour Microsoft le but est d’obtenir le soutien des fabricants d’appareils photos numériques et de téléphone portable.

Le WMP sera supporté en natif par Windows Vista et prochainement pour Windows XP.

En termes de nouveautés, il apporte en plus d’une meilleure compression la possibilité de ne compresser qu’une partie de l’image afin de garder certains details intacts, ainsi que la rotation sans recompression. Pour plus d’informations techniques, voici le lien wikipedia et les specifications du format. On peut aussi se pencher sur le tableau comparatif des différents formats d’image ici.

Pour le moment, le WMPhoto n’est pas orienté vers le web, cependant, lors de l’arrivée de Windows Vista, il est certain que le support natif va amener de nombreux échange en WMPhoto. De plus, la taille des fichiers images diminuées pour une même qualitée, amènera nécessairement une utilisation sur le web.

Le WMPhoto devrait réellement être utilisé aux environs 2008, si il arrive à s’imposer face au jpeg2000.

Technorati Tags: , , , , , , , ,

SVG part1

Thursday 15 June 2006

Tout le monde connaît le format jpg, le format png ou encore le format gif, mais qui connaît le format svg?

Sommaire

  • Présentation du format SVG
  • Structure du format SVG

Présentation de SVG

SVG pour scalable vector graphics est une spécification du w3c (World Wide Web Consortium). Une chose importante à dire est que ce type de format est gratuit et très performant.

Ce format gère très facilement les images, le son et donc la réalisation de nombreuses animations (certains jeux sont même créés en SVG). C’est certainement, à l’avenir, un très gros concurrent de flash.

Basé sur le format xml, sa hierarchie reste celle d’un arbre, et il permet de décrire des ensembles de graphiques vectoriels (représentation composée d’objets géométriques permettant de produire des images). Il peut aussi, comme le format xml, être inclus dans d’autres documents XML (XHTML, XML traités par XSL-FO) et donc peut être visualisé à partir de certain navigateur web tel que firefox à l’aide de plug-in approprié.

Il permet trois type d’objets graphiques:

  1. les formes vectorielles
  2. les images
  3. le texte

On peut facilement modifier, remanier, de telle sorte à ce que l’on puisse les grouper avec d’autres objets graphiques, mais aussi leur rajouter des attributs de style. Tous les attributs de nos objets vectoriels sont indiqués dans notre document XML et l’indication des couleurs et des polices d’écritures sont gérés par un système spécifique de style tel que le CSS ou le XSL.

Grâce aux formes géométriques de base et à la gestion des chemins (utilisant les courbes de Bézier) on peut réellement créer n’importe quelle forme, n’importe quel dégradé de couleur ou encore n’importe quel filtre pour nos animations.

Un des gros avantages de ce format est que l’on peut définir nos animations, soit à l’intérieur de nos fichiers, soit dans un langage de script externe.
Ceci rentre dans la partie technique de ce format que je développerais dans la part 2.
(fin part1)

Technorati Tags: , , , , , , , , ,