Cependant il reste encore beaucoup de problèmes de compatibilités entre les différents navigateurs. C’est pourquoi je décide aujourd’hui de vous proposer un petit panel de quelques petites choses qui vont nous simplifier la vie a nous tous Intégrateur/ Webdesigner !
Je vais donc parler aujourd’hui de 3 nouveautés (dont vous avez sûrement déjà entendu parlé) que j’ai découvertes à travers différents sites et tutoriaux.

> Les blocs arrondis
> La transparence
> Les ombres

1. Les blocs arrondis

Voilà une chose que beaucoup d’entre nous rêve de faire via les CSS sans être obligé d’enregistrer des images.
La propriété CSS3 border-radius permet de le faire. Elle est reconnut déjà sur tout les navigateurs récents exception faite de Internet Exlorer (même dans sa version 8).

ATTENTION : la propriété doit être préfixée par -moz- pour les navigateurs type FireFox ou -webkit- pour les navigateur comme Chrome ou bien Safari pour fonctionner sur ces navigateurs. (ex : -moz-border-radius) Voici un exemple de syntaxe :

Avec le code HTML suivant :

<div id=”cadre”>
<p>Votre contenu à l’interieur ….</p>
</div>

Astuce : Il est possible de définir aussi l’arrondi de chaque angles. Pour Internet Explorer cette seule manipulation n’est pas suffisante, il va donc falloir faire appel à du javascript afin de contourner le problème et rendre ce navigateur compatible. Le JS qui sera utilisé s’appel roundies.js vous pouvez le télécharger sur dillerdesign.com

Une fois ce code téléchargé, il faut l’appliquer dans un commentaire conditionnel dans le <header> comme ceci :

<!–[if lte IE 8]>
<script type=”text/javascript” src=”roundies.js”>
</script>
<![endif]–>

Il vous faudra par la suite indiquer quels éléments vous souhaitez mettre avec des bords arrondis soit à la fin du script JS soit tout à la fin de votre document après la fermeture de la balise </body> (dans tout les cas après l’appel de roudies.js) de cette manière :

<script type=”text/javascript”>
// Indique quels seront les éléments qui bénéficieront des coins arrondis
DD_roundies.addRule(’div#cadre’, ‘10px’);
</script>

Au final cette pratique sera compatible sur tous les navigateur, seul Opera sera en reste jusqu’à sa version 10.5.
Vous pourrez appliquez cette méthode sur toute sorte de bloc ou bien encore pour les onglets d’un menu… etc Pour plus de détails je vous invite à lire ce tutoriel sur le site Alsacréations.

2. La transparence

J’avoue que jusqu’a maintenant pour appliquer une opacité sur un bloc j’utilisais la propriété opacity mais elle était contraignante car celle-ci appliquait une transparence non seulement à sont bloc mais aussi au contenu de celui ci ce qui n’était pas le rendu que je souhaitais.

La propriété rgba à l’avantage de n’appliquer l’opacité qu’a l’élément voulu et non a tous ses descendants.

Voici un visuel de comparaison de l’utilisation des deux propriétés qui sont au passage toutes les deux des propriété CSS3 :

On s’aperçoit donc que le contenu du bloc qui utilise la propriété opacity est aussi touchez par l’opacité.

Voici donc les deux syntaxes :

Comme pour la nouveauté précédente, Internet Explorer ne reconnaît pas cette fonctionnalité…

Il va donc falloir détourner un filtre propriétaire à Microsoft, le gradient filter (soit filter:progid:DXImageTransform.Microsoft.gradient) dont la fonction est de créer des dégradés de couleur d’arrière-plan sur IE.
Ce filtre permet de prendre en compte la transparence de la couche alpha dans ses valeurs. On peut donc rendre un fond transparent en indiquant la même couleur pour le début et la fin du dégradé.

La valeur indiquée sera en héxdécimale #AARRGGBB (AA sera la transparence).

NB : Pour les correspondance de transparence :

0%  -> #00
20% -> #33
50% -> #80
75% -> #C0
100% -> #FF

Voici donc le code pour contourner les désagréments avec IE pour la propriété RGBA : (dans une commentaire conditionnel)

<!–[if lte IE 8]>
<style type=”text/css”>
#transparent2 {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
zoom: 1;
}
</style>
<![endif]–>

3. Les ombres

Il est possible dorénavant de faire des ombres à des blocs ou bien encore sur du texte ce qui nous permet de ne plus avoir à enregistrer des images à tout va.

Les propriétés qui le permettent sont :

- box-shadow qui permet de créer une ombre portée à des bloc tel que des images ou bien même des div…
- text-shadow permet quand à elle de faire une ombre porté à du texte.

Cependant comme les deux cas précédent, certains navigateurs ne sont pas encore capables de gérer ce genre de propriétés et c’est pourquoi il va encore falloir recourir à quelques astuces.

La propriété box-shadow permet donc de faire une ombre portée en choisissant le décalage et la couleur.

Voici donc un cas illustré :

Code :
.ombrage {
border: 5px solid #fff;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 8px 8px 12px #555;
width :150px;
}

Pour info : Ici la première valeur indique le décalage vers la droite, le second, celui vers le bas, le troisième c’est la force du dégradé et la dernière valeur la couleur du dégradé.

Internet Explorer même dans sa version 8 ne reconnaît donc pas cette fonctionnalité, il va donc falloir lui appliquer tout simplement un filtre Shadow toujours dans un commentaire conditionnel (voir l’exemple au dessus) :

.ombrage {
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#aaaaaa’, Direction=135, Strength=12);
zoom: 1;
}

Cela fonctionnera donc après sur tout les navigateurs excepté Opéra.

La propriété text-shadow permet donc de faire une ombre portée sur un texte.

Voici un exemple illustré :

Cette propriété est une propriété CSS2. Sur le même principe que box-shadow.

Dans les styles : (pour tous les navigateur excepté IE)
.texte {
text-shadow: 0px 0px 9px #777;
color: #fff;
}

Pour IE : (dans un commentaire conditionnel)

.texte {
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#999999′, Direction=135, Strength=4);
zoom: 1;
}

Si vous souhaitez approfondir ce sujet rendez-vous sur ce tutoriel.

Vous connaissez sans doute les types d’extensions de base tels que .jpg, .gif  ou bien .psd. Mais il en existe beaucoup d’autres et chaque type d’extension à en fait son but propre, conçue pour une fonction spécifique qu’on ne peut connaître sans s’être au préalable renseigné.

Il existe de nombreuses extensions qui se révèlent très utiles lorsqu’on fais du Print par exemple, mais on ne sait pas toujours quand et lequel utiliser, c’est pourquoi je vous propose une liste de ces extensions pour éclaircir tout ça.

PSD : Le format Photoshop

.PSD est le format de fichier de travail de référence de Photoshop car il permet de conserver les calques, les couches de transparence, (le format .PSB lui autorise des fichiers plus volumineux en taille).

Ce format est compatible avec les autres logiciels de la suite Adobe ce qui peut s’avérer utile pour importer des éléments d’autres logiciels comme illustrator ou indesign par exemple.

BMP : Le format d’image Windows standard

Le format .BMP (Bitmap), est un format d’image matricielle ouvert développé par Microsoft et IBM. C’est un des formats d’images les plus simples à développer et à utiliser pour programmer. Il est lisible par quasiment tous les visualiseurs et éditeurs d’images. Il prend en charge les modes RVB, Couleurs indexées, Niveaux de gris et Bitmap.

Je vais énumérer les différentes caractéristiques du Bitmap :

1. L’image est composée de pixels
2. Les pixels contiennent des informations (couleurs, tailles, un nombre de couches soit 3 avec le RVB, soit 4 avec le CMJN))
3. Chaque action sur l’image agit sur les pixels.
4. Une image Bitmap supporte le rétrécissement sans perte, mais dans le cas d’un agrandissement la qualité en subit les conséquences.

Le format BMP est quasiment inexistant sur le Web : il ne dégrade pas l’image et n’utilise généralement pas de compression, aussi est-il très lourd. Il est donc utilisé en général pour la photo, le photomontage, tous ce qui nécessite une qualité quasi réelle.

GIF : Le Graphics Interchange Format

Le format .GIF (Graphics Interchange Format, littéralement « format d’échange d’images ») est un format d’image numérique couramment utilisé sur la Toile pour afficher des graphiques et des images à couleurs indexée.

Ce format se limite donc à 256 le nombre maximal de couleurs différentes présentes dans chaque calque d’une même image, cette limitation  n’est pas gênante pour les logos, les graphiques et la plupart des images synthétiques, ainsi que les photographies en noir et blanc. En revanche une photographie couleur de qualité nécessite plus de nuances.

Le format .GIF est un format compressé LZW conçu pour réduire à la fois la taille du fichier et le temps de transfert électronique. Il préserve les transparences des images à couleurs indexées, mais il ne prend pas en charge les couches alpha. Il permet aussi de réaliser des images animées de basse qualité.

DCM : Le format Dicom

Le format .DCM DICOM (Digital Imaging and Communications in Medicine) est un standard de communication et d’archivage en imagerie médicale. Dans Photoshop, vous pouvez ouvrir et travailler avec des fichiers DICOM (.dc3, .dcm, .dic ou sans extension). Ils peuvent contenir plusieurs « tranches » ou images représentant les différents calques d’une numérisation.

Photoshop lit toutes les images d’un fichier DICOM et les convertit en calques. Il permet également de placer toutes les images DICOM dans une grille sur un seul calque ou encore, d’ouvrir des images sous la forme de volumes 3D que vous pouvez faire pivoter dans un espace 3D. Il reconnaît les fichiers DICOM 8, 10, 12 ou 16 bits (les fichiers 10 et 12 bits sont convertis en fichiers 16 bits).

EPS : Le format Encapsulated PostScript

Le format .EPS (Encapsulated PostScript®) peut représenter des données graphiques vectorielles et Bitmap et est pris en charge par la majorité des logiciels graphiques, d’illustration et de mise en page. Le format .ESP est utilisé pour transférer des illustrations PostScript d’une application à une autre. Lorsque vous ouvrez un fichier .EPS contenant un graphique vectoriel, Photoshop se charge de le pixelliser, c’est-à-dire de convertir son contenu en pixels.

Le format .EPS prend en charge les modes colorimétriques Lab, CMJN, RVB, Couleurs indexées, Bichromie, Niveaux de gris et Bitmap, ainsi que les masques, mais il ne prend pas en charge les couches alpha. Le format DCS (Desktop Color Separations), variante du format EPS standard, permet d’enregistrer les séparations de couleurs des fichiers CMJN. Vous pouvez exporter des images contenant des couches de ton direct au format DCS 2.0. Il convient d’imprimer les fichiers .EPS sur une imprimante PostScript.

Photoshop utilise les formats EPS TIFF et EPS PICT afin de pouvoir ouvrir des images enregistrées avec des formats de fichier produisant des aperçus mais non pris en charge par Photoshop (comme QuarkXPress®). Vous pouvez éditer et utiliser une image d’aperçu ouverte de la même façon que tout autre fichier basse résolution. L’aperçu EPS PICT est disponible uniquement sous Mac OS.

PICT : Format de mise en page sous MAC

.PICT est un format de fichier graphique créé par Apple comme métafichier standard pour ses premiers Macintosh. Il peut contenir des informations graphiques bitmap ou vectorielles, ainsi que quelques champs de texte. C’est également le format natif de QuickDraw Manager. Lors de l’utilisation d’une application Macintosh, toute image peut être convertie en .PICT par simple copier/coller, vers une image de destination. Un exemple concret est la personnalisation des icônes du Finder. Avec le passage à MacOS X, le .PICT a été remplacé par le .PDF en temps que métaformat natif. Cependant la compatibilité avec le .PICT est encore largement assurée.

JPEG : Joint Photographic Experts Group

Le .JPEG permet de sauvegarder en CMYK, RGB et en niveau de gris, soutenant donc des palettes de couleurs complètes. Cela signifie que quand vous enregistrez des photographies pour des projets WEB, c’est l’extension que s’y prêtera le mieux.

Le .JPEG compresse la taille de fichier en renonçant sélectivement aux données. Ce format reste un de ceux les plus répandus en imagerie numérique.

ASTUCE : Certains d’entre vous peuvent rencontrer des difficultés avec des applications ne pouvant lire des fichiers CMYK enregistrés au format JPEG. Cela peut coïncider avec des applications Java pas lisant votre fichier JPEG dans n’importe quel mode de couleurs. Si cela arrive, réenregistrer votre fichier mais cette fois-ci en désactivant l’image de prévisualition.

PCX : Encodage run-length

Le .PCX est un format d’image numérique dont l’encodage est basé sur une forme de run-length encoding.

Ce format a été développé par la société ZSoft Corporation à Marietta, en Géorgie. C’était le format de base de leur logiciel PC Paintbrush, un des logiciels d’édition d’images les plus populaires sous DOS à l’époque.

La plupart des fichiers .PCX utilisent une palette de couleurs, mais le format a été étendu pour permettre l’utilisation d’images 24 bits (3 octets) et dans ce cas l’encodage est réalisé en séparant les trois composantes de couleur. Le format .PCX était très populaire sur les premiers systèmes DOS et Windows, mais il se fait de plus en plus rare, car il existe de nos jours des formats permettant une compression bien meilleure, comme .GIF, .JPEG et .PNG.

RAW : Photoshop Brut

Étymologiquement, ce terme provient de l’anglais raw, qui signifie brut. Il devrait donc désigner un fichier n’ayant subi aucun traitement.

Tel est le cas pour le format RAW des fichiers générés par l’outil de scan sous Linux xsane. Dans ce format, les différents bits des pixels constituant l’image scannée sont copiés les uns à la suite des autres, ce qui permet un décodage très simple du fichier.

Par contre, les fichiers RAW des constructeurs d’appareils photo sont des fichiers compressés et organisés dans un format généralement spécifique à chaque constructeur d’appareil, voire à chaque appareil. Chaque type de RAW (plus de 200 actuellement) nécessite un logiciel spécifique pour être visionné et édité. Principales extensions des fichiers RAW avec leurs fabricants : .arw > Sony .crw .cr2 > Canon .dng > Adobe .kdc > Kodak .mrw > Minolta .nef > Nikon .orf > Olympus .ptx .pef > Pentax .raf > Fuji .x3f > Sigma .rw2 > Panasonic

Pour un photographe qui ne se préoccupe pas de ces problèmes informatiques, le fichier est en quelque sorte « en attente de développement » dans la mesure où il n’a subi aucun des traitements d’images nécessaires pour produire une image lisible ou pour améliorer son rendu visuel : contraste, luminosité, saturation, balance des couleurs, netteté.

C’est le format le plus utilisé par les photographes professionnels, car il leur donne une entière maîtrise sur leurs images en leur permettant d’effectuer ces traitements par eux-mêmes (un peu comme en argentique lorsque l’on développe et tire soi-même depuis ses négatifs).

PXR : Le format Pixar

.PXR est un Format de legs utilisé dans systèmes de production d’animation informatiques et dans image médicale. PXR est un acronyme tiré de Pixar. Il Stocke des images en RGB ou des bitmaps en niveaux de gris à une résolution de 8 bits. Il utilise le format binaire et n’utilise pas de compression Ce format fut Développé en 1986 par Pixar pour le poste de travail d’Ordinateur d’Image de Pixar.

PNG : Portable Networks Graphic

.PNG est un complément graphique principalement créé et appliqué aux images destinées à la publication sur le Web, ce format de fichier est utilisé pour moins de perte a la compression. Supérieur au .GIF qui est plus traditionnel, le .PNG soutient des images de 24 bit, autorisant la transparence de fond. Il a deux options standard, modifiables via la boîte de dialogue d’option “Entrelacée”

Le première commande montrera des images dans un navigateur seulement sur le téléchargement. La commande “Entrelacée” montrera les versions de résolution basse d’une image dans un navigateur. Cette option, faite pour un temps de téléchargement apparemment plus court augmente cependant la taille de l’image. Toutefois, faites attention : le .PNG n’est pas compatible avec tous les navigateurs. Si vous utilisez du .PNG avec la version 6 d’Internet Explorer des bugs d’affichage à l’image peuvent apparaître.  (voir prochainement le tutoriels pour remédier à ce problème)

SCT : Scitex Continuous Tone

Le format .SCT (Scitex le Ton Continu) a été développé par Scitex est utilisé pour le traitement d’image haut de gamme. Les fichiers de SCT/CT sont utilisés principalement pour des profils colorimétriques en CMY et CMYK. L’image n’utilise pas de compression.

TGA : Truevision Targa

Truevision Targa ou .TGA est un format de fichier image qui a été développé par Truevision à partir de 1984. Le format .TGA supporte les images de n’importe quelle taille. Il est principalement utilisé dans les milieux professionnels pour la création d’images couleur. Il permet de développer des images selon trois techniques :

* Pseudo-Color : chaque pixel est défini simplement par un indice qui fait référence à une couleur définie dans la palette graphique.
* True-Color : chaque pixel est directement défini par les intensités des couleurs primaires RVB.
* Direct-Color : chaque pixel est défini par trois indices indépendant faisant référence à l’intensité des couleurs primaires RVB définies dans une palette.

Il est capable de coder les couleurs entre 1 et 24 bits, et 8 bits supplémentaire sur le canal alpha.

TIFF : Tagged Image File Format

Ce format n’est pas à négliger. Le .TIFF non compressé est un format courant et lu par beaucoup des logiciels de traitement d’image matricielle. .TIFF est extrêmement flexible :

• Il est notoirement connu pour permettre l’enregistrement des données multi-octets au format big endian ou little endian.
• Il permet d’utiliser de nombreux types de compression, avec ou sans perte de données : brut, PackBits, LZW, CCITT Fax 3 et 4, JPEG.
• Il supporte de nombreux codages des pixels, de 1 à 64 bits par pixel, signé ou non, ainsi que les formats en virgule flottante 32 et 64 bits définis par l’IEEE.
• Il supporte de nombreux espaces colorimétriques : noir et blanc, monochrome, palette de couleurs (de toute taille), RVB, YCbCr, CMJN, CIELab.
• Il supporte de nombreuses informations additionnelles sur les couleurs utiles à la calibration colorimétrique : correction gamma, etc.
• Il supporte le stockage d’image par bloc, et aussi de multiples images par fichier, des images alternatives en basse résolution, des annotations sous forme de courbes et de texte, etc.

Cette considérable flexibilité fait que .TIFF est utilisé dans des applications très diverses, des scanners industriels aux appareils photo numériques en passant par les imprimantes. Cela fait également que tous les logiciels ne sont pas capables d’afficher tous les types d’images .TIFF. Il est possible de créer des extensions propriétaires et secrètes à .TIFF.

Bien, ce listing touche à sa fin, j’espère avoir éclairé certaines de vos lanternes, et que vous avez appris des choses qui vous serviront dans un futur proche comme lointain.

Merci a Quivers pour ce tutoriel !