TD-1 : traitement de l image et HTML Préliminaires Les cours seront toujours sur ma page institutionnelle : http://virginie.zampa.u-grenoble3.fr/pages/cours-15-16.html Si vous avez besoin de me contacter : virginie.zampa@gmail.com Le serveur utilisé toute l année est DIP01 avec comme login et mot-de-pass : «m1_dilipem». Traitement de l image Préliminaires Sur ma page cliquez sur «images utiles», téléchargez et décompressez les documents et enregistrez-les sur votre ordinateur, dans un dossier adéquat. Pour cette partie du TD vous utiliserez paint et paint.net Exo 1 : modification du nombre de couleurs au format BMP Pour faire cet exercice vous devrez utiliser le logiciel Paint. Dupliquez l image avec plus ou moins de couleurs Dans le dossier dans lequel vous avez enregistré et décompressé les images, créez un dossier «exo1» dans lequel vous glissez «scanner.bmp» Ouvrez-la avec paint puis enregistrez-la sous trois noms différents en fonction du nombre de couleurs scanner1.bmp avec 256 couleurs, sacnner2.bmp avec 16 couleurs et scanner3.bmp en monochrome. Comparez les résultats obtenus Remplissez le tableau ci-dessous à l aide de l explorateur pour connaître la taille des fichiers obtenus et la qualité de l image (excellente, bonne, moyenne, médiocre) fichier Résolution (bits/pixel) Nb max de couleurs Taille de l image (ko) Qualité de l image scanner.bmp 24 bits (image 16 millions originale) scanner1.bmp 8 bits 256 scanner2.bmp 4 bits 16 scanner3.bmp Monochrome 1 bit 2 Questions : - - d après vous quelle est le meilleur compromis taille /qualité il est indispensable de rouvrir entre chaque enregistrement le document original, pourquoi?
Exo 2 : modification du format : les format gif et jpeg Dans cet exercice vous utilisez paint.net Le format bmp n est pas optimisé : il n est pas compressé et il s agit d un format propriétaire. Sur internet les 3 formats les plus utilisés sont : GIF, JPEG et PNG. Changez le format d une image Créez un dossier «exo12» dans lequel vous copier l image «scanner.bmp». Vous allez convertir cette image dans divers formats (fichier / enregistrer sous ). Repartez chaque fois de l image initiale. Vous obtiendrez ainsi : scanner.gif, scanner.jpg et scanner.png. Comparez les résultats fichiers Taille de l image (Ko) Qualité de l image Scanner.bmp Scanner.gif Scanner.jpg Scanner.png Recommencez les mêmes actions avec «dessin.bmp». fichiers Taille de l image (Ko) Qualité de l image dessin.bmp dessin.gif dessin.jpg dessin.png Exo 3 : capturez un écran Pour capturer une zone de l'écran, il est possible d'utiliser les commandes suivantes de Windows : - La touche ImprEcr de votre clavier permet de copier dans le presse- papiers la surface totale de l'écran - La combinaison de touches Alt + ImprEcr permet de copier dans le presse- papiers la surface de la fenêtre courante. Capturez un logo 1. Allez sur un site tel que wikipedia 2. Capturez la fenêtre de votre navigateur Alt + ImprEcr 3. Démarrez si nécessaire le programme < Paint.net>. Créez un nouveau fichier. 4. Collez la fenêtre capturée dans Paint.net. 5. Délimiter la zone correspondant au logo puis de nouveau edition / coller dans une nouvelle image 6. Enregistrez ( fichier / enregistrer sous ) de façon à ce que votre image prenne le moins de place mémoire possible (c'est- à- dire en choisissant le format le plus adapté)
Exo 4 : Retravaillez une image Toujours avec Paint.net et avec l image de départ scanner.bmp Redimensionnez votre image Explorez et testez les différents choix du menu Essayez en particulier de modifier les dimensions de l'image (en conservant ses proportions) afin de régler la hauteur à 400 pixels. Quelle est la nouvelle taille du fichier en octets?... Ajustez l image Le menu sert essentiellement à régler les paramètres de luminosité, contraste, couleur. Explorez et testez les différents choix du menu. Pensez à annuler le choix précédent (Ctrl+Z) avant de tester un nouveau réglage. Appliquez des effets graphiques Le menu permet d'appliquer différents traitements permettant de modifier l'image de départ.. Explorez et testez les différents choix du menu Effets. Pensez à annuler le choix précédent (Ctrl+Z) avant de tester un nouveau réglage.
Utilisez des calques Le menu calque permet de traiter plusieurs images sur des "calques" qui vont se superposer. Cela permet par exemple de placer un personnage sur un décor. A vous maintenant vous devez placer l'image personage.jpg sur l'image décor.jpg. La procédure est la suivante : 1. Lancez Paint.net 2. Ouvrez le fichier paysage.jpg et sauvegardez- le sous paysage1.jpg 3. Afficher la liste des calques (menu fenêtre... calques ou F7). 4. Vous observez qu'il existe un seul calque. 5. Choisissez calque / importer à partir d un fichier puis sélectionnez le fichier personage.jpg 6. il existe maintenant deux claques. 7. En utilisant l'outil baguette magique, il s'agit maintenant de "détourer" le personnage afin qu'il s'intègre dans le décor. 8. Sélectionnez une zone avec la baquette magique puis Répétez l'opération pour détourer entièrement le personnage. 9. Ajustez ensuite la taille du personnage et placez- le correctement dans le décor. 10. Pour terminer il faut fusionner les deux calques pour n'en former qu'un seul. 11. Choisissez calque / fusionner avec le calque inférieur 12. Sauvegardez vote travail, fermez l'image et réouvrez- la pour voir le résultat obtenu.
HTML Préliminaires Téléchargez monpremiersite.zip sur ma page et décompressez le. Rappels : - pour consulter une page web vous avez besoin d un navigateur (chrome, firefox, etc.), - pour concevoir une page web vous avez besoin d un éditeur de texte (scite, notepad ++, etc.) - les noms de vos fichiers et dossiers ne doivent comporter ni espaces ni caractères spéciaux (accents, cédilles, etc.) - pour mettre votre site sur un serveur vous avez besoin d un logiciel de FTP tel que Filezilla Exercice 5 : quelques modifications sur le site existant - modifiez le «title» de la page index.html, c est-à-dire ce qui est entre les balises <title> et </title>. Que voyez vous? - quelles sont les balises utilisées pour faire des tableaux? à quoi correspondent-elles? - ajoutez une ligne dans le tableau avec netscape (qui n est plus du tout utilisé), cherchez l image, enregistrez-la et insérez-la. - ajoutez une colonne pour indiquer s il s agit de navigateurs toujours utilisés et remplissez cette colonne - déplacez une des images et mettez-la dans le dossier «pages»? que faut-il faire pour qu elle apparaisse à nouveau dans la page «tableaux.html»? - ajoutez sur chaque page du site des liens vers la page d accueil. Exercice 6 : manipulation de tableaux Cet exercice se fait dans la page «tableaux.html». Il est possible de faire des tableaux plus complexes en fusionnant des cellules <td colspan="3"> Fusionne 3 colonnes </td> <td rowspan="2"> Fusionne 2 lignes </td> À vous maintenant. Créez les tableaux suivants tableau 1 étudiant nom prénom Num_étudiant Toto Titi 21223345 tableau 2 Informatique Note S1 Note S2 5
Tableau 3 DILIPEM 1 étudiants notes nom prénom Num- et Info S1 Info S2 Didactique langues romanes anglais Option libre Tableau 4 1 2 3 4 5 6 7 8 Les listes Créez un page dans votre site «listes.html». En remplaçant <ul> par <ol> vous obtenez une liste numérotée. Dans cette nouvelle page faite une liste à puce classique avec votre liste de courses puis une liste à puce numérotée avec les pays que vous voulez visiter. Bien entendu vous devez lier cette page aux autres pages du site. Votre site Faites un petit site (environ 6 pages) sur le sujet que vous voulez. Rangez proprement vos fichiers en pensant à bien appeler votre page d accueil index.html. Vous pouvez utiliser tout ce qui a été vu aujourd hui (insertion de tableau, d image, de liste à puce) mais pour l instant vous ne devez surtout pas faire de mise en forme. Déposez votre site sur DIP01 dans public_html. sources Les exercices sur le traitement d images sont issus des TD de Jean-Philippe Pernin 6