M1 info-doc
prévisionnel des séances
Fonctionnalités et prise en main d'une plate-forme de travail collaboratif ; production de documents structurés, conception de pages web, wikis, forums de discussion
Mots clés : documents structurés ; document ; structure ; donnée ; web sémantique ; travail collaboratif ; wiki ; blog ; cms ; base de données ; xml ; sql.
liens vers un site proposants des images libres de droits
http://commons.wikimedia.org/wiki/Main_Page
Séance 1 : 2012-13
Carnet de compétence : Blog Wordpress en ligne
- Blog en ligne de votre cours... les grandes lignes du travail avec copies d'écran et indications variées (>> http://m1infodoc201213.wordpress.com/)
- Nous listerons ici les adresses de vos blogs
- Thème, Gestion de l’apparence (choix d’un thème, insertion d’une entête et modification du titre et du slogan du site ainsi que des couleurs de texte et de fond - thème Able)
- Modification et création d'article
- Catégories (évoqués)
Inkscape
- Propriétés de document (>> lien vers le tutoriel vidéo)
- formes de bases (>> lien vers le tutoriel vidéo: 1 2 3)
- couleurs de remplissage et de contour (>> lien vers le tutoriel vidéo)
- transparence et flou de forme (>> lien vers le tutoriel vidéo)
- disposition (changement de plan)
- intégrer et annoter une copie d'écran (vu également avec Word)
Documents et liens
>> Charte graphique de l'upec
>> télécharger Inkscape (bien choisir la version PC ou Mac et suivre les instructions) sur le site officiel
>> Inkscape sur 01.net (pour windows uniquement)
>> Inkscape sur Commentcamarche.net
=> Travail à la maison :
1- remplir le blog-carnet de compétence en retraçant les acquis…
2- réviser les manipulations Inkscape
3- parcourir la charte graphique de l’UPEC
séance 2 - 2012-13
Blog en ligne Wordpress
Créer des catégories et y associer des articles
Les mots clés
Créer un menu par catégories
Les limites du blog en ligne : pas d’ajouts d’extensions et donc limitation de la gestion de la page d’accueil ou des auteurs)
Ajout d’un média (image, vidéo etc…)
Ajout d’un sondage
Ajout d’un formulaire (custom form ?)
Gestion des widgets (test du suivi de blog)
Inkscape : (fin des outils vu en S1 +)
à part l'ouverture et la modification de pdf nous n'avons pas travaillé les outils décrits ci-dessous en S2... Vous pouvez parcourir les vidéos pour avancer en autonomie et intégrer ces éléments au webdesign proposé pour la S3.
Ouvrir pdf et le modifier (vu rapidement... TOUJOURS ouvrir d'abord Inkscape puis faire fichier ouvrir pour ouvrir la page du pdf que l'on veut modifier ou dont on veut récupérer des éléments)
Objet en chemin (>> vidéo sur infotext)
Outil de tracé vectoriel (>> vidéo sur infotext) + outils modification des chemins (>> vidéo sur infotext)
Texte le long d’un chemin et remplissage d’une forme
Calques (copie palette et copie d’éléments graphiques) (>> vidéo sur infotext)
Pipette pour capturer les couleurs d'un objet et la donner à un autre (>> vidéo sur infotext)
Export (>> vidéo sur infotext) du web design en vue de l’implémenter (>> choix de la définition lors de l'export)
Outil d’opérations booléennes (>> vidéo sur infotext)
=> Travail à la maison :
1- au vu de ce que l’on a découvert inventer un webdesign simple reprenant les éléments de la charte graphique. Le faire sur papier (scan/photo du papier et dépôt sur le blog en ligne) et en suite le réaliser sur inkscape… On règlera les problèmes éventuels en début de séance 3 si nécessaire.
Les outils d'Inkscape décrit ci-dessus que vous n'auriez pas pu maitriser via les vidéos seront repris en S3.
Les questions de définition et d’export en fonction de l’usage seront elle aussi reprises en S3 (GIMP… définition, échelle...)
Séance 3 - 2012-13
HTML5 et CSS3
1 - Réalisation d’une page statique munie d’une feuille de style.
Le code minimum et les balises <p></p>
---------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
----------------------------
structurer son document en créant des paragraphes et des titres de niveau 1 à 4.
les balises
<h1></h1> = > titre de niveau 1
<h2></h2> = > titre de niveau 2
<h3></h3> = > titre de niveau 3
<h4></h4> = > titre de niveau 4
<p></p> = >paragraphes
<em>mot important</em> => balise indiquant la mise en avant d'un élément "important" (emphase) par défaut en italique mais peut être modifié grâce à la feuille de style
<strong>mot très important</strong> => balise indiquant la mise en avant d'un élément "très important" (exergue forte) par défaut en gras mais peut être modifié grâce à la feuille de style
La mise en forme directe est à éviter le plus possible...
-----exemple de balise de mise en forme directe --------
<font style="color:#80FBBB">dapibus suscipit, ante magna porta urna,</font>
<b>mot en gras</b>
<i>mot en italique</i>
----------------------------------------------------
Structurer son site en dossier et sous dossier...
Balise images d'illustrations
------balise image-----------
'<img src="'images/ecureil-vignette.png" />
---------------------------------
image d'illustration (>> télécharger l'image de l'écureuil en bas de page dans les tutoriels inkscape)
-------à placer dans la partie <head> de la page html--------------------
<link rel="stylesheet" href="/joomla/styles.css" type="text/css">
----------------------------
séance 4 - 2012-13
HTML et CSS
2 – ajout d’images de fond et de div
dans la page html créer des divs et les nommer (id)
dans la feuille de style ajout de règle pour chaque élément nommé et éventuellement ajout d'un attribut background-image
Masque de détourage avec GIMP en Séance 7 (S48)
3 - menu et lien sur du texte ou des images
4 – div flottantes
- Exercice: Réaliser une page web avec des div flottantes
>>> exemple de page avec div flottantes
faire en sorte d'avoir le menu à gauche (200px de large) et le corps à droite (700px de large)
Séance 5 - 2012-13
HTML et CSS
Extension du menu jusqu'au pied (css classes et html contenu vide)
Application de l'attribut de flottement à l’intégration d’une image dans un texte à la façon d’un habillage en carré sur word
Préparation d’un site à plusieurs page : organisation du sens, scénario de navigation (possibilités ou pas de navigation entre les pages), dessin de l’arborescence
CMS et wiki
Distribution et détermination des sujets autour des propositions de F. Colin (Notions de SIC et auteurs à connaître)... ou autre sujets proposés par les étudiants.
Rédaction des premiers articles en html en préparation du CMS.
Installation d’un Wordpress en groupes (S6)
thème et autres fonctionnalités...
>> site référençant des sites de photos libres de droits
Travail à faire pendant la semaine libre
=> mise au point des sujets en groupe
séance 6 - 2012-13
Wordpress
Installation d’un Wordpress en groupes (voir l'adresse exacte en page d'accueil de votre cours Eprel)
- infodoc1 (Cassandra, Chaharzad, Marianne)
- infodoc2 (Pauline, Hélène, Julie, Diane)
- infodoc3 (Ludivine, Naoual, Carole)
Modification du wordpress en cours (thème, installation de widget et autres options, ajouts de médias)
- thème : twentyeleven à modifier intégralement
- catégories (Fiches de lecture, Fiches auteurs, Fiches notions => à personnaliser si votre thème de site est différent de celui pris en cours c.a.d tout le contenu du cours de F.C.)
- mots clés
- création d'un menu personnalisé
- installation de widgets (nuage de mots clés - wp-cumulus, sondage - wp-polls)
- ajouts de média (images et copies d'écran)
- création de comptes avec des droits différents...
Travail à faire pendant les 2 semaines de stage
=> rédaction d’articles en collaboration avec les membres de votre groupe (organisation....)
séance 7 - 2012-13
Wordpress
- modification et personnalisation du thème (voir les pdfs sur Eprel)
- remplissage du wordpress
Séance 8 - 2012-13
(20 décembre 2012)
GIMP
les outils de retouche (détourage, découpage, masques, calques, voir exercices MEN photoshop)
>> tutoriels GIMP sur infotext
Les bases de gestion d'image
- gérer la définition d'une image
- taille de l'image et rééchantillonnage (réduction homothétique)
- découpage (recadrage) de l'image
- utiliser les règles et les repères
Les bases de la retouche d'image
- outils de sélection
- sélection à partir d'un tracé
- détourer une image
- masques
- tampon de retouche
- assembler plusieurs images
Exercices
Exercices
gérer la qualité d'une image et son cadrage
>> lien vers la vidéo pour découper et recadrer une image
>> lien vers la vidéo pour gérer la définition (qualité) d'une image
image de Edgar Sepp Pimik, 20 juillet 2008,
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
(Cette image provient de l'encyclopédie en ligne wikipédia et est publiée sous licence CC ce qui autorise à l'utiliser, la partager et de la modifier en citant l'auteur de l’œuvre ou le titulaire des droits qui vous confère cette autorisation)
>> détail de la licence CC
>> page source de l'image
composer des associations d'images (techniques et outils de sélection introduction au photomontage, assemblage d'images)
>> lien vers le détail pas à pas (sur Photoshop... mais les outils sont les mêmes avec GIMP)
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
détourer une image ( en utilisant les tracés)
>> lien vers la vidéo créer un tracé et transformer les sélections en masque
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
Cette image est utilisée avec l’aimable autorisation du webmestre d’Education à l'environnement
http://environnement.ecoles.free.fr
associer deux images ou plus (détourage, masques, niveaux et mise à l'échelle)
Quelques conseils :
1- copier le bateau dans l'image du port (sur un nouveau calque) puis enregistrer le fichier de travail au format Photoshop (.psd)
2- ajuster la taille du bateau en tenant compte de la profondeur de champ de l'image du port (menu "Edition>Transformation>Homothétie" en sélectionnant le calque du bateau)
3- avec un masque rendre tout ce qui est autour du bateau transparent (détourer avec un masque vectoriel la partie haute du bateau en conservant une bonne part de l'eau sous le bateau puis affiner en utilisant le masque de fusion pour fondre l'eau des deux images)
4- enregistrer l'image au format JPG...
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
(Ces images proviennent de l'encyclopédie en ligne wikipédia et sont publiées sous licence GNU ce qui autorise à les utiliser, les modifier et les distribuer)
>> lien vers la page source de Manhattan
>> lien vers la page source du Queen Mary
Quelques conseils:
1- ouvrir l'image de la dune et l'enregistrer au format photoshop (.psd)
2- transformer l'arrière plan en calque (soit en double cliquant sur le vérou, soit en dupliquant le calque et supprimant l'arrière plan en suite)
3- sélectionner grossièrement le phare et le copier sur un nouveau calque dans le document qui comporte déjà la dune (le calque du phare est au dessus de celui de la dune)
>> lien vers la vidéo décrivant les sélection au lasso et >> lien vers la vidéo décrivant la gestion des calques
4- détourer le corps phare avec un masque (de préférence vectoriel) et affiner en utilisant un masque de fusion (pour l'antenne et la base du phare)
>> lien vers la vidéo décrivant la création de tracés, >> lien vers la vidéo décrivant la création de masque vectoriel à partir d'un tracé
5- faire une transformation en miroir au phare pour que la lumière soit cohérente
(sélectionner le calque sur lequel figure le phare et choisir menu "Edition>Transformation>Symétrie axe horizontal")
6- avec l'outil tampon de duplication copier l'une des autruches sur un claque au dessus de celui du phare
>> lien vers la vidéo décrivant l'utilisation du tampon de duplication
7- copier le paysage de soleil couchant sur un calque disposé sous celui de la dune et lui faire subir un miroir
(sélectionner le calque sur lequel figure le paysage et choisir menu "Edition>Transformation>Symétrie axe horizontal")
8- masquer le ciel bleu de la dune en utilisant un masque de fusion de préférence
9- éventuellement déplacer le ciel de soleil couchant pour améliorer l'effet
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
(Ces images proviennent de l'encyclopédie en ligne wikipédia et sont publiées sous licence GNU ce qui autorise à les utiliser, les modifier et les distribuer)
>> lien vers la page source du phare
>> lien vers la page source de la dune
>> lien vers la page source du coucher de soleil
retoucher une image (effacer un élément)
Quelques conseils :
- utiliser l'outil de clonage (>> voir sur Eprel la fiche portant sur l'outil de clonage)
- penser à collecter les source du tampon dans diverses parties de l'image pour masquer le travail
(Cette image provient de l'encyclopédie en ligne wikipédia et est publiée sous licence GNU ce qui autorise à l'utiliser, la modifier et la distribuer)
>> voir les détails sur la licence
>> page source de l'image
(cliquer sur l'image pour l'ouvrir dans une nouvelle fenêtre puis faire un clic droit et enregistrer sous)
Séance 9 - 2012-13
Contrôle continu en présence (contenu à préciser)
Séance 10 - 2012-13
Bases de Données avec B. A.