TD-1 : traitement de l`image et HTML - virginie

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 : [email protected]
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
Nb max de
Taille de
Qualité de
(bits/pixel)
couleurs
l’image (ko)
l’image
scanner.bmp
24 bits (image 16 millions
originale)
scanner1.bmp
8 bits
256
scanner2.bmp
4 bits
16
scanner3.bmp
Monochrome 1 2
bit
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)
Scanner.bmp
Scanner.gif
Scanner.jpg
Scanner.png
Recommencez les mêmes actions avec « dessin.bmp ».
fichiers
Taille de l’image (Ko)
dessin.bmp
dessin.gif
dessin.jpg
dessin.png
Qualité de l’image
Qualité de l’image
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 anglais langues romanes Option libre Tableau 4 1
3
2
5
4
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