Support pour exercices Spip et KompoZer

Excel

Jean-Michel FREDERIC — 2011-11-23T08:08:39Z

- On the web

Cours KompoZer

Jean-Michel FREDERIC — 2011-10-17T08:17:36Z

Sommaire

Christine

http://www.kd0.fr/000_sta/christine...

Anne-Cécile

http://www.kd0.fr/000_sta/annece25/...

Gabrièle

Logiciels pour le cours

Jean-Michel FREDERIC — 2011-10-03T11:31:02Z

Pour télécharger les logiciels utilisés dans le cours : c'est ici.

Pour les personnes participant au cours KompoZer, si vous vous identifiez en (cliquant sur connexion), vous aurez accès à d'autres infos, en salle de cours.

Cordialement

Jean-Michel

PS :

N'hésitez pas à me laisser des messages sur ce site, ne serait-ce que pour vérifier que ça marche.

JPEG, GIF, PNG : Formats graphiques pour le web

Jean-Michel FREDERIC — 2011-05-18T19:21:36Z

Sommaire

Les formats graphiques pour le Web

JPEG, GIF, PNG

Titre	Détail
JPEG	Joint Photographic Experts Group Extension : jpg Compression très efficace avec perte de qualité Supporte 16,7 millions de couleurs Permet l'affichage progressif (codage progressif) Ne supporte pas la transparence Ne permet pas de créer des animations Quand l'utiliser : c'est le format à utiliser de préférence pour les photos, ou s'il n'y a ni animation, ni transparence.
GIF	Graphics Interchange Format Extension : gif Compression sans perte de qualité Supporte 256 couleurs (dithering = diffusion d'erreur = lissé des couleurs) Permet l'affichage progressif (entrelacement) Supporte la transparence Permet de créer des animations Quand l'utiliser : images avec couleur transparente, gifs animés, boutons, logos, icônes...
PNG	Portable Network Graphic Extension : png Compression sans perte de qualité Supporte couleurs réelles jusqu'à 42 bits (dithering = diffusion d'erreur = lissé des couleurs) Permet l'affichage progressif (entrelacement) Supporte la transparence Ne permet pas de créer des animations Sauf si format APNG (non officiel) Remarques : seuls les navigateurs récents reconnaissent ce format. Les png sont plus légers que les gifs et moins que les jpg.
On oublie	Il existe... Il existe beaucoup d'autres formats, soit trop lourds (bmp), soit très moyennement compatibles avec le web (Tiff), soit incompatibles et très lourds. Le cas du svg est intéressant : je pense que ce sera le prochain standard (développé et maintenu par le W3C, compatible html 5). Voir du svg http://www.raintraipsing.com/view_s...

Pour aller plus loin

http://www.lookimage.com/formats/
- Pour les images exemples
http://fr.wikipedia.org/wiki/Animat...
- Format APNG
http://www.w3.org/Graphics/SVG/
- W3C
http://www.tutorialspoint.com/html5...
- Exemple de SVG embarqué en HTML 5 (pour info, juste pour info, on se calme...)

Notions de base concernant les images

Jean-Michel FREDERIC — 2011-05-18T15:37:40Z

Sommaire

Résolution, Pixels...

Notions de bases concernant les images

Objet	Détail
Introduction	Trois valeurs liées Taille en pixels (définition), dimensions réelles et résolution sont trois valeurs liées : Taille en pixels = Résolution x Dimensions réelles Ex : 800 x 600 Dimensions réelles (en cm) = Taille en pixels / Résolution Ex : 5 cm x 4 cm (en centimètres ou en pouces) Résolution (en ppp) = Taille en pixels / Dimensions réelles 800 dpi (dot per inch = points par pouces)
Image matricielle	Comme une mosaïque antique Une image matricielle est composée d'un tableau (matrice) à plusieurs dimensions (hauteur, largeur, dans le cadre du web actuel) : donc on stocke une mosaïque de points élémentaires. BMP (à éviter car très lourd) GIF JPG PNG TIFF (à éviter car variations suivant le navigateur) Ce type d'image ne peut pas être agrandi indéfiniment sans perte.
Image vectorielle	Des formules géométriques Une image vectorielle est composée d'une succession de calculs mathématiques qui reproduisent le tracé de l'image. SVG Ce type d'image peut être agrandi indéfiniment sans perte. Même si certains navigateurs le reconnaissent, il est préférable de ne pas utiliser ce format actuellement (2011) Pour tester le SVG, utiliser le logiciel Inkscape (libre et gratuit).
Poids d'une image	Ce qui influence le poids d'une image Sa définition (ce qui est différent de sa taille affichée) Sa résolution (nombre de pixels par unité de longueur) Pour un écran : 72 à 96 ppp (les imprimantes fonctionnent en 600 ppp) Plus la résolution est élevée, plus le poids est important Son taux de compression Comme pour les Zip Intégré dans les formats JPG, GIF, PNG Le nombre de couleurs 24 bits ("couleurs vraies") > = 16 million de couleurs 16 bits = 65 000 couleurs 8 bits ("couleurs indexées) = 256 couleurs Rarement utile : 1 bit, 4 bits, 8 bits, 32 bits Petit calcul de poids Une photo de 1600 x 1200 pixel représente 1 920 000 points (# 2 Millions) Si chaque point est codé sur 24 bits (position, couleur, etc), cela nous fait 46 Mb Soit en octets : 5.6 Mo

Pour aller plus loin

Wikipédia : Image numérique
Wikipédia : Résolution (imagerie numérique)
Azur.net : http://www.azurs.net/photoblog/reso...

Couleurs et associations

Jean-Michel FREDERIC — 2009-05-06T18:55:55Z

Sommaire

Palettes, nuanciers

Une des problématiques importantes du choix des couleurs dans un site, c'est que la couleur varie suivant les écrans. Ce qui apparait vert sur votre écran peut apparaître jaune sur la majeure partie des autres écrans...

Ô tristesse.

Voici quelques sites qui je l'espère pourront vous aider dans votre quête de couleurs tolérables.

(avant visite, munissez vous de RGBéditor de Didier Messein).

Quelques sites de palettes et nuanciers

scrd.net : colorants naturels
alphadesign.fr : le créateur de nuancier d'Eric Meyer
atelier-duotang.com : la palette de couleurs de l'atelier
toutimage.com : pallette de couleur web
Pourpre.com : Dictionnaire alphabétique

Tests pour daltonisme

Un des objectifs de nos sites étant qu'ils soient lisibles et environ 10% des personnes ayant une interprétation différente des couleurs, il nous faut valider la lisibilité de nos sites.

Rendez vous sur :

Vischeck.com : simulation de visualisation de votre site
- Simulation de visualisation par Deutéranope, Protanope, Tritanope
Daltoniens.fr : En savoir plus sur le daltonisme
- Des explications et des tests de dépistages

Vous trouvez que mon site n'est pas lisible ?

Merci de me le signaler en me laissant un message ci-dessous ou sur le forum.

Liste d'exercices pour KompoZer

Jean-Michel FREDERIC — 2009-05-02T19:17:01Z

Sommaire

Introduction

Chacun des exercices ci-dessous vous permet de découvrir différentes fonctionnalités de KompoZer

Pour visualiser un exercice, cliquez sur son image ou sur le lien qui l'accompagne