Atelier animé lors du Printemps des Petites Entreprises Franc-Comtoises

1. JPEG, PNG, PDF, CMJN, HTML,…
Préparez-vous à communiquer !
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

2. 1 / Contexte
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

3. L’ordinateur
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

4. La loi du nombre
La numérisation
= codage d’une information en chiffres
binaire : 0 | 1 (« bit »)
8 bits = 1 octet
1ko = 1024 octets / 1 Mo = 1024ko
débit 8 Mb/s = 1 Mo/s
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

5. 2 / Codage des images
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

6. Le Pixel
Une image numérique est constituée d'un ensemble de points
appelés pixels.
la Résolution / taille du pixel
la Définition / combien de pixels
écran =>72 DPI
impression => 300 DPI
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

7. Codage des couleurs
RVB
La synthèse additive : Lorsqu’un écran
affiche une image, c’est l'addition du rouge,
du vert et du bleu qui donne le blanc.
Utilisation :
écran, téléviseur, scan…
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

8. Codage des couleurs
CMJN (ou quadrichromie)
La synthèse soustractive : Lorsqu'on mélange
des pigments colorés en peinture l’addition du
Cyan, du Magenta et du Jaune donne du Noir (en
théorie).
Utilisation :
imprimante, imprimeur…
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

9. Image matricielle
Une image matricielle est une image
numérique dans un format de données
qui se compose d'un tableau de pixels.
la définition + la résolution +
la profondeur = qualité de l’image
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

10. Image vectorielle
Une image vectorielle (ou image en
mode trait) est une image
numérique composée d'objets
géométriques (segments de droite,
polygones, arcs de cercle, etc.)
Chaque forme qui la compose est
décrite mathématiquement à partir
de points et de tangentes.
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

11. 3 / Formats d’image
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

12. Formats d’image
Objectif : rapport poids /qualité
> Compression
JPEG (format standard – perte données)
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

13. Formats d’image
Objectif : rapport poids /qualité
> Compression
JPEG (format standard – perte données)
GIF (256 couleurs – transparence – anim )
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

14. Formats d’image
Objectif : rapport poids /qualité
> Compression
JPEG (format standard – perte données)
GIF (256 couleurs – transparence – anim )
PNG (+16 M coul. – transp. – pas de perte)
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

15. Formats d’image
Objectif : rapport poids /qualité
> Compression
JPEG (format standard – perte données)
GIF (256 couleurs – transparence – anim )
PNG (+16 M coul. – transp. – pas de perte)
TIFF (qualité max – très lourd)
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

16. 4 / Les autres formats à connaître
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

17. Autres formats
à connaitre
Fichiers de travail / sources
PSD (photoshop – plutôt matriciel)
AI (illustrator – plutôt vectoriel)
INDD (indesign – mise en page – print)
EPS (description – verrouillé – pros)
PDF (universel)
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

18. 5 / Caractéristiques du print
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

19. Fond perdu
Zone grise = Fond perdu
Les petites lignes
dans les coins
= Traits de coupe
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

20. Page
Chaque feuille a un recto et un verso,
soit 2 pages.
Pour les documents avec plus
de 2 pages, il existe 2 solutions
pour en faire un même document :
Le pliage
La reliure : le plus courant est le
multiple de 4 pages, les imprimeurs
travaillant avec des cahiers.
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

21. Format
quelques exemples
affiche : A3
papier en tête : A4
carte postale : 10x15 cm
flyers : 20x15 (équivalent A5)
cartes de visite : 8,5x5,4 cm
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

22. BAT
simulation de l'impression
vérification de la conformité du document
approbation du client
engagement de l'imprimeur
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

23. 6 / Caractéristiques du web
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

24. Historique / notions
60’s : ARPANET (réseau d’échange de données)
70’s : INTERNET (plusieurs réseaux interconnectés)
90’s : WWW (navigateur / pages / système hypertexte)
HTTP / URL / HTML / W3C
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

25. Caractéristiques
d’affichage
médias (ordinateur / mobile / tablettes)
navigateurs
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !

26. Caractéristiques
techniques
évolutions des langages (HTML / CSS /…)
possibilité d’animation (Flash, Javascript)
avènement du web sémantique
JPEG, PNG, PDF, CMJN, HTML,… Préparez-vous à communiquer !