TD n°2 – 19/10/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette.

Présentation au sujet: "TD n°2 – 19/10/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette."— Transcription de la présentation:

1 TD n°2 – 19/10/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette

2 Compte rendu travaux rendus TD n°1
Plan du TD n°2 Compte rendu travaux rendus TD n°1 Notions abordées au cours du TD n°2 (Démonstrations / Explications) Consignes Mise en œuvre

3 Compte rendu TD n°1 Moyenne : 10,5 / 20 Note + : 14 / 20 Note - : 7 / 20 Détail des notes individuelles au cours du TD (notes fournies à titre d’information, non prises en compte dans la note finale pour cette matière)

4 Compte rendu TD n°1 Critères de notation :
Mise en page globale / Qualité graphique /10 Qualité générale /4 Créativité /2 Complexité de mise en œuvre /2 Qualité des finitions /2 Détourage /5 Qualité des détourages /3 Utilisation des masques /2 Respect des contraintes et livraison /5 Respect des contraintes du Cahier des Charges /2 Noms des fichiers explicites sans espaces ni caractères spéciaux /1 Organisation des calques au sein des fichiers sources /1 Livraison complète / 1

5 Points positifs : Compte rendu TD n°1
Livraisons dans les délais (sauf 1 non livré) Mail de livraison correct Bonne utilisation des fichiers liés en majorité

6 Points négatifs : Compte rendu TD n°1 Aspect « Technique »
Manque d’organisation dans les fichiers livrés et au sein des fichiers sources Essayer de se mettre à la place d’une personne qui n’a jamais vu le ou les fichiers, comment fait-il pour s’y retrouver ? Noms de fichiers pas toujours explicites Idéal = combinaison numérotation + description (exemple : art01_description) Livraisons pas toujours complètes, éléments manquants, ou contraintes non respectées Penser à faire une check-list du fichier de consigne avant de faire le zip

7 Points négatifs : Compte rendu TD n°1 Aspect « Qualité graphique »
Manque de créativité Travail qui favorise souvent la facilité technique de mise en œuvre plutôt que la qualité graphique Utilisation minimum des masques L’utilisation des masques devrait être systématique pour tous les détourages (facilité de mise à jour) Détourages de qualité moyenne Penser à placer un calque de couleur noir (ou en contraste) sous l’objet à détourer pour ne rien oublier

8 Points négatifs : Compte rendu TD n°1 Généralités
Fautes d’orthographe dans les textes, copier/coller non mis à jour, Lorem Ipsum Organisation des fichiers bien souvent mise en place après l’import des fichiers liés (liaisons à mettre à jour) Polices particulières non livrées

9 Organisation de son espace de travail
Notions abordées TD n°2 Sensibilisation aux contraintes liées à une multi-compatibilité web/tablette Organisation de son espace de travail Import d’objet dynamique vectoriel sous Photoshop Création, application et enregistrement de styles Création, utilisation et enregistrement de scripts d’automatisation Renommage par lots de fichiers

10 Contraintes compatibilité web / tablette
2 types de contraintes Contraintes ergonomiques Contraintes techniques

11 Contraintes compatibilité web / tablette
Contraintes ergonomiques Taille de l’écran (PC / tablette / mobile) Interface tactile Lisibilité …

12 Contraintes compatibilité web / tablette
Contraintes techniques Technologies HTML5 Responsive web design Pas de swf sur iOS Format spécifique des images HD Formats d’images à privilégier png / jpeg / gif (non animé?) svg _2x (ou autre format HD)

13 Contraintes compatibilité web / tablette
Particularités des écrans HD / Rétina (non spécifique iOS) 2 fois plus de pixels Ex : l’écran d’un IPhone 5 de 1136x640 pixels contient en réalité 2272x1280 pixels. Pour optimiser un affichage HD, il faut donc enregistrer une image 2 fois plus grande et l’afficher à l’aide des media queries (sinon le device agrandira l’image pour l’afficher à 200% > image floue)

14 Contraintes compatibilité web / tablette
Ressources utiles Diagramme des fonctionnalités HTML 5 disponibles par navigateur Infos sur les images HD (iOS) Nouveautés Web Stratégies de développement web mobile

15 Organisation de son espace de travail
Identification Fenêtres / panneaux utilisés le plus souvent Fenêtres / panneaux rarement utilisés Mise en place Affichage et positionnement des fenêtres / panneaux à conserver Effacement des fenêtre / panneaux non utilisés Sauvegarde de son espace de travail

16 Organisation de son espace de travail

17 Import d’objet dynamique vectoriel
Définition élément créé dans Illustrator, importé en conservant un lien direct vers le fichier source Avantages Rapidité de mise à jour Accès direct au fichier ouvert dans Illustrator par un double clic sur le calque

18 Import d’objet dynamique vectoriel

19 Import d’objet dynamique vectoriel

20 Import d’objet dynamique vectoriel
Ressources utiles

21 Création et application de styles
Styles Photoshop Définition : effets appliqués dans les options de fusion d’un calque Effets non destructifs s'appliquant à un calque (et pas à toute l'image) Possibilité de les modifier et/ou désactiver à tout moment Styles prédéfinis / créés / téléchargés

22 Création et application de styles
Styles prédéfinis

23 Création et application de styles
Création (démo) Sélection du calque sur lequel est appliqué le style à mémoriser Fenêtre Styles > Nouveau Style Saisie du nom du style et sélection des options

24 Création et application de styles
Utilisation (démo) Sélection du calque sur lequel doit être appliqué le style Fenêtre Styles > Clic sur la vignette du style à appliquer

25 Création et application de styles
Enregistrement (démo) Fenêtre Styles > Menu contextuel > Enregistrer les styles Saisie du nom et de l’emplacement du fichier .asl Attention ! par défaut l’ensemble des styles présents dans la fenêtre Styles est sauvegardé  supprimer les styles non utiles avant de sauvegarder le fichier .asl

26 Création et application de styles
Chargement (démo) Permet d’importer un style créé initialement ou téléchargé sur Internet Procédure Fenêtre Styles Menu contextuel de la fenêtre > Charger les styles Sélection du fichier .asl à utiliser

27 Création et application de styles
Ressources utiles (en anglais)

28 Scripts d’automatisation
Définition permet d'enregistrer une série d'évènements pour les reproduire à volonté et à l'identique Peut être utilisé… soit successivement sur le même fichier, soit sur un dossier de fichiers (traitement par lots, objet du prochain TD)

29 Scripts d’automatisation
Exemples d’utilisation Réduction / agrandissement Recadrage Ajout d’élément (copyright, cadre, …) Correction d’exposition (photo) Recolorisation …

30 Scripts d’automatisation
Scripts prédéfinis

31 Scripts d’automatisation
Utilisation Sélection de la ou les actions à réaliser ou sélection de l’ensemble d’actions à réaliser Clic sur le bouton « Exécuter » Pour plus d’infos sur les options de lecture :

32 Scripts d’automatisation
Création (démo) Procédure : Fenêtre Actions Création d’un nouvel ensemble (dossier) permettant de différencier le script créé de ceux prédéfinis Création du nouveau script et début de l’enregistrement A partir de ce moment chaque action est mémorisée Arrêt de l’enregistrement une fois la ou les manipulations effectuées Possibilité d’affecter un raccourci clavier permettant de lancer le script

33 Scripts d’automatisation
Enregistrement (démo) Favorise le travail collaboratif Permet de stocker ses propres scripts Procédure : Fenêtre Actions Sélectionner un ensemble / dossier de scripts Menu contextuel de la fenêtre > Enregistrer les actions Saisie du nom et de l’emplacement du fichier .atn

34 Scripts d’automatisation
Chargement (démo) Permet d’importer un script créé initialement ou téléchargé sur Internet Procédure Fenêtre Actions Menu contextuel de la fenêtre > Charger les actions Sélection du fichier .atn à utiliser

35 Scripts d’automatisation
Ressources utiles

36 Renommage par lots de fichiers
Outils permettant de renommer rapidement plusieurs fichiers à la fois Exemples : Rechercher une chaîne de caractères dans le nom d’un fichier et la remplacer par une autre ou l'effacer Changer des lettres minuscules en majuscules et vice-versa Ajouter une séquence numérique (001, 002, ) Ajouter la date et l'heure (actuelle ou prise du fichier ou dossier) Changer la longueur du nom … Logiciels gratuits : XnView , Renomme, AntRenamer, …

37 Attention au respect des contraintes !!!
Consigne TD n°2 Objectif : créer une bibliothèque de pictogrammes rapidement déclinables en styles et tailles Fichier de consigne Attention au respect des contraintes !!!

38 Questions ?

39 A vous !