Travaux pratiques psycho-pédagogiques de 2ème cycle
Titre: Réalisation de sites webs pour l'enseignement.
Lieu: Salle S-1.118, Mardi 17-1900h (tous les 15 jours)
Dates SE06: 21 mars, 4 et 25 avril, 9 et 23 mai, 6 et 13 juin
Enseignant: Diego Corti
Participants: ce TP est réservé en priorité aux étudiants de 2ème cycle en branche principale de psychologie générale et pédagogique, 18 personnes au maximum.
Prérequis: avoir terminé le premier cycle, lire des articles en anglais.
Langue: Français / Anglais.
Description:
Mots-clés: Computer Supported Learning, Usability Evaluation, Human Computer Interaction, Cognitive Web Design, Iterative Prototyping
Renseignements: corti@acm.org
Inscriptions: http://www.unifr.ch/psycho/pgp/inscr/coursup.php
provisoire
| 1 | 25.10 | langage HTML, édition du code source de la page personnelle avec Notepad et Mozilla Exercice de code |
| 2 | 22.11 | suite HTML + Powerpoint |
| 3 | 29.11 | styles css + Travail de présentation d'un article avec Powerpoint Exercice d'observation/évaluation d'un sujet en interaction avec un site web Why You Only Need to Test With 5 Users |
| 4 | 13.12 | Styles css, positions d'éléments DIV : structure du discours (document XHTML) vs. présentation (css) HTML: h1, p, ul, li, div CSS: position |
| 5 | 10.01 | barres de navigations : navigation 1 et navigation 2 Dreamweaver 1: environnement, layers, tables, barre de menus, behaviors Javascript |
| 6 | 24.01 | Structure de frame avec DIV et CSS. Télécharger le cours en Compact HTML (84Kb). Powerpoint: html_bases.ppt Suite tutorial javascript + layers: href="javascript:;" onmouseover=" window.open('','','')" + |
| 7 | 31.01 | Dreamweaver basics |
| 8 | 21.03 | Test de usability sur sites. Rapports à rendre. Dreamweaver/Fireworks suite. |
| 9 | 04.04 | feuille de style externe + template de navigation dans Dreamweaver (accès protégé aux tutorials: tut ) |
| 10 | 25.04 | réplication Dreamweaver avec beamer, menus déroulants et feuille de style -> template... |
| 11 | 09.05 | configurations de Dreamweaver, templates de sites, test de usability madepublic.com (avec beamer) |
| 12 | 23.05 | Dreamweaver suite |
| 13 | 06.06 | exercices Flash: testime.fla + clickme.fla + doc |
| 14 | 13.06 | révision de l'état des travaux avec chacun |
| name | |||
|---|---|---|---|
| Augsburger Maude | http://homeweb1.unifr.ch/augsbuma/pub/ | ||
| Augugliaro Giuliano | |||
| Bataillon Sophie | |||
| Bosson Marlène | |||
| Bottazzi Giuseppe | |||
| Caetano Myriam emmanuelle | |||
| carducci stefano | |||
| Carruzzo Emmanuelle | |||
| Chalet Sandrine | |||
| Don Tarocci Camillo | |||
| Farine Julie | http://homeweb2.unifr.ch/farinej/pub/ | ||
| gesto noelia | |||
| Gianini Stefano | |||
| Hertig Célia | |||
| Hulmann Catherine | |||
| Joye Daisy | |||
| Lamy Muriel | http://homeweb3.unifr.ch/lamym/pub/ | ||
| Mencacci Jessica | |||
| Monney Grégoire | |||
| Nesta Marley Robert | |||
| Nowak Iwona | |||
| Perraudin Laure | |||
| Perrini Sandro | |||
| Pouget Bénédicte | |||
| Renevey Eléonore | |||
| Ressiga Vacchini Eleonora | |||
| Schmid Barbara | http://homeweb4.unifr.ch/schmibar/pub/ | ||
| Schneider Michel | |||
| Sciarini Denisia | |||
| Vadillo Vanessa | |||
| vazquez sonia | |||
| Walther Tatiana | |||
| Warner Brian Hugh | |||
| Wicht Caroline | |||
| Yerly Eva |
En cas de problèmes d'autorisation d'accès à vos sites personnels, essayez (de comprendre) la procédure suivante : http://student.unifr.ch/main/fr/faq/detail.php?p=302
Pour notre utilisateur moyen Inco Gnito, son nouveau site web se situe à l'adresse:
http://homeweb2.unifr.ch/gnito/pub
où gnito est son username et homeweb2 le serveur qui l'héberge.
p.ex.: http://homeweb1.unifr.ch/cortisa/pub/index.htm ---->index.htm page par défaut et non plus welcome.html ...
Le contenu de votre ancien site a été transféré dans le répertoire My Documents/Pub.
Chez Gnito: \\home\gnito\MyD Documents\Pub
Pour réactiver les pages, vous devez:
1. ouvrir le répertoire My Documents /Pub
2. sélectionner tous les éléments
3. couper
4. ouvrir le répertoire Pub à la racine de votre home
5. coller les éléments
Accéder par le web à mon dossier personnel
Les dossiers personnels sont accessibles par le web. Le dossier personnel contient un dossier appelé Pub. Les documents stockés dans ce derniers sont accessibles sans restriction et sans mot de passe à tous les internautes.
Les éléments stockés dans le dossier personnel ailleurs que dans Pub ne sont accessibles qu'après authentification.
Pour y accéder, vous devez posséder un navigateur web ou un client WebDAV.
L'adresse à taper est indiquée sur votre feuille jaune.
Elle est de la forme
https://homedav1.unifr.ch/cortisa
soit pour Inco Gnito
https://homedav2.unifr.ch/gnito
Documents tutoriels
SQL php MySQL tutorial Flash 5: mesure des temps de réaction |
Digital Library |
Paper-Supported Collaborative Work: |
How do people use WWW bookmarks? |
| Webcast: des cours en video à Toronto... http://epresence.kmdi.toronto.edu/ |
Britannica Encyclopaedia online! |
|
Open University |
| TECFA Université de Genève. TECFA est une unité active dans le domaine des technologies éducatives. Elle fait partie de la Faculté de Psychologie et des Sciences de l'Education de l'Université de Genève. Plein de tutoriels et ressources pour les étudiants ... et les autres ... http://tecfa.unige.ch /guides/html/pointers.html |
Bibliographie en cours... Recherche dans le catalogue RERO ou BCU
|
Participants 03/04:
|
|
|
1 |
2 |
3 |
4 |
-styles! |
A-D -> homeweb1 |
1 |
Bétrisey Guillaume |
x |
x |
x |
x |
1-liens! 4–orientation! 3–site “learnability-usability” e.g. refaire avec un autre cd |
||
2 |
Braunschweig-Spatz Corinne |
x |
x |
x |
x |
4 liens vers home 1 |
||
3 |
Conus Valérie |
|
|
|
|
Clara… and ? |
||
4 |
Gyger Leyla |
x |
x |
x |
x |
Good! |
||
5 |
Hoing Corinna |
x |
|
|
|
Liens! “The page cannot be found” |
||
6 |
Lovey Olivier |
x |
x |
x |
x |
Avec G.Bétrisey, pas Asktog 4 orientation |
||
7 |
Mariaca Pierre |
|
|
|
|
Autre Clara Schuman |
||
8 |
McCarthy Linda |
x |
x |
|
|
Liens? |
||
9 |
Nadig Karin |
x |
|
|
|
CorpusVoici mes traveaux universitaires … ??? liens? |
||
10 |
Picard Philippe |
x |
x |
x |
x |
4 Modèle O.Lovey? 1 liens |
||
11 |
Ribordy Maryam |
x |
|
|
|
Liens! |
||
12 |
Sciboz Martine |
|
|
|
|
??? |
||
13 |
Ramoni Blagena |
|
|
|
|
??? |
||
14 |
Springer Philipp |
|
|
|
|
??? |
||
| mail général |
Calendrier 03/04:
| 1 | nov 4 | langage HTML, édition du code source de la page personnelle avec Notepad et Mozilla |
| 2 | nov 18 | suite HTML + styles css |
| 3 | déc 2 | Travail de présentation d'un article avec Powerpoint |
| 4 | déc 16 | Exercice d'observation/évaluation d'un sujet en interaction avec un site web |
| 5 | jan 6 | Dreamweaver 1: environnement, layers, tables, barre de menus, behaviors Javascript |
| 6 | jan 27 | Suite tutorial javascript + layers: href="javascript:;" onmouseover =" window.open('','','')" + Why You Only Need to Test With 5 Users (Alerte: les machines de la salle S1-118 ont été dé-installées? -Où sont passés Dreamweaver, UtraEdit, Mozilla, Powerpoint ??? ) |
| 7 | fév 3 | révision |
| 8 | mars 16 | Dreamweaver ne fonctionne pas (problème de licence) + reboot automatique... Test de usability, design sur madepublic |
| 9 | mars 30 | feuille de style externe + template de navigation dans Dreamweaver (accès protégé aux tutorials: tut ) |
| 10 | avr 20 | réplication Dreamweaver avec beamer, menus déroulants et feuille de style -> template... |
| 11 | mai 4 | configurations de Dreamweaver, templates de sites, test de usability madepublic.com (avec beamer) |
| 12 | mai 18 | Dreamweaver suite |
| 13 | juin 1 | exercices Flash: testime.fla + clickme.fla + doc |
| 14 | juin 15 | révision de l'état des travaux avec chacun |
PARTICIPANTS SH 2002/03:
name |
||
Anastasi Barbara |
||
Ciulavu Vasilica Natalia |
ciulavu | |
Croci Romina |
croci | |
Da Fonseca Brigitte |
dafonseca | |
Dällenbach Carole |
dallenbach | |
Ferretti Manuela |
ferretti | |
Gastaldello Elisa |
gastaldello | |
Jakimovski Suzanna |
jakimovski | |
Montalto-Gasser Catherine |
montaltogasser | |
Morand Alexia |
morand | |
Odermatt Anja |
odermatt | |
Signorell Patrick |
signorell | |
Terrani Nicole |
terrani | |
Wyler Debora |
wyler |
| PARTICIPANTS 2001/02: (état au 21 avril 2002) | ||
| lang=FR>Alicia Scarpati http://www-student.unifr.ch/e-97/scarpatt/pub |
||
| lang=FR>Demis Casellini, Michele Sersale??? http://www-student.unifr.ch/e-99/casellin/pub/ |
-> | http://homeweb1.unifr.ch/casellin/pub/welcome.html |
lang=FR>Pescia Sara, Julia Uehlinger |
http://homeweb1.unifr.ch/ lang=FR>UehlingJ/pub/welcome.html | |
lang=FR>Céline Dubey |
||
David Perron |
||
Benoît Perriard, lang=FR>Raphael Magne, Eva Muniz |
||
Paul Pignat |
||
lang=FR>Flavia Guidali, Louella Giambonini |
||
lang=FR>Sanja Glisic, lang=FR>Tanja Frei lang=FR> |
||
lang=FR>Valentina Pagani, Giorgia Cavadini |
||
Christian Maissen |
PARTICIPANTS SH 2000/01:
| Calendrier SH 2000 | Contenu (en cours) | |||
| 1 | 02/11/00 | Inscriptions, configuration Dreamweaver, home page personnelle amorcée. L'horaire est déplacé aux jeudi 17-19h. | ||
| 2 | 09/11/00 | Inscriptions (Guerry, Salamin, X), home page pesonnelle revue, création de liens vers d'autres documents, insertions d'images. | ||
| 3 | PAS DE TP le 16/11/00 | (SALLE OCCUPEE) | ||
| 4 | 23/11/00 | Layout contrôlé avec des tableaux. Insertion d'images et images swap onmouseover... | ||
| 5 | 30/11/00 | Création de formulaires. Concept et exemples de navigation et d'orientation dans un site. | ||
| 7/12/00 | Je suis absent. | |||
| 6 | 14/12/00 | Introduction à Powerpoint, présentation de la digital library www.acm.org/dl/newsearch.html Premier travail par groupe de 2 étudiants: présentation Powerpoint (ou website Dreamweaver) d'un article tiré de la bibliographie ou de la digital library. Deadline: 18 janvier 2001, à placer sur vos sites personnels (simple link vers le fichier Powerpoint ou site web intégré). |
||
| 21/12/00 | Bonnes vacances... | |||
| 7 | 11/01/01 | Navigation et orientation, moteurs de recherches, organisation des bookmarks, newsgroups... 2ème travail par groupe de 2: usability evaluation de www.unifr.ch ou www.unifr.ch/annuaire/ Rapport d'expérience à publier sur votre site pour la rentrée (22/03/01). |
||
| 8 | 18/01/01 | Présentation d'un outil CSCW (computer supported collaborative work) pour le web: document review (pour Internet Explorer 5 seulement... je suis désolé pour Netscape...) |
||
| 9 | 25/01/01 | Détails de méthodes d'évaluation d'un site (pour le prochain travail de groupe): approche expérimentale, heuristic evaluation, ... Exemples, le formulaire d'abonnement du Temps... | ||
| 10 | 1/02/01 | Navigation et orientation dans un site. Exemples.Gil. Je passe dans chaque groupe pour voir les problèmes particuliers. | ||
| 8/02/01 | Pas de TP. | |||
| 11 | mardi 20/03/01 | |||
| 12 | mardi 03/04/01 | Voici l'article pour le dernier travail du semestre qui validera le TP: http://madepublic.com/corti/useit/firstPrinciples.html Bruce Tognazzini est une référence incontournable dans le monde de l'interface. J'aimerais que vous conceviez un site web (un sous site de votre site personnel) présentant cet article en le découpant en unités (p.ex. 17 principes = 17 pages web) avec un système de navigation et d'orientation efficaces entre les pages. En plus, il s'agira pour chacun des 17 principes énoncés de trouver un exemple et un contre-exemple illustrant le principe, soit sur le web, soit dans une application desktop (p.ex. Word, Dreamweaver...) par une figure copie-écran (ou par un lien sur la page en question) qui explique pourquoi vous pensez que cette illustration tient compte du principe ou au contraire n'en tient pas compte du tout. Tâchez de penser ce site comme si vous donniez un cours online sur les principes de Tognazzini, essayez de convaincre avec des exemples frappants et amusants... |
||
| 13 | mardi 24/04/01 | http://www.unifr.ch/main/15 |
||
| 14 | mardi 08/05/01 | TP annullé, j'ai besoin de soleil... | ||
| 15 | mardi 22/05/01 | Paul Dourish and Graham Button. 1998. On "Technomethodology": Foundational Relationships between Ethnomethodology and System Design. Human-Computer Interaction, 13(4), 395-432. Paul Dourish est un type incroyablement actif dans le domaine... à suivre...http://www.dourish.com |
||
| 16 | mardi 05/06/01 | |||
| 17 | mardi 19/06/01 |
| Calendrier 99 | Contenu (en cours) | |||
| 1 | 03-Nov-99 | Surf "actif interactions d'applications": Word, Netscape, Acrobat, ACM Digital Library. Recherche d'informations sur le web, création de liens dans un tableau Office98. |
||
| 2 | 10-Nov-99 | Connection aux serveurs et création de home pages personnelles sur comptes étudiants avec Communicator. | ||
| 3 | 17-Nov-99 | Réalisation d'un site personnel avec concept de navigation. Test de familiarité aux ordinateurs. | ||
| 4 | 24-Nov-99 | (suite) Tentative (avortée) de réalisation d'un formulaire interactif. | ||
| 5 | 01-Dec-99 | Développement d'une présentation multimedia avec Powerpoint et conversion sous HTML. Une présentation d'un article tiré de la digital library ou donné en référence dans la bibliographie devra être mis en forme avec Powerpoint ou Netscape pour la séance du 22 décembre. [intallation de Dreamweaver réussie!] | ||
| férié | ||||
| 6 | 15-Dec-99 | Je suis absent... profitez-en! | ||
| 22-Dec-99 | Présentation des articles avec Powerpoint ou sous laforme d'un site avec Netscape. (voir la séance du 1er décembre). | |||
| 7 | 12-Jan-00 | Je suis absent... vous avez suffisamment de travail avec vos sites...inspirez vous des articles de Jakob Nielsen (www.useit.com) | ||
| 8 | 19-Jan-00 | Révision de l'accès aux sites et contrôle des travaux sur Powerpoint. 2ème travail: évaluation expérimentale des outils de navigation et d'orientation du site de l'Université de Fribourg. | ||
| 9 | 26-Jan-00 | Rapport d'évaluation du site www.unifr.ch placés sur vos sites personnels. | ||
| 10 | 02-Feb-00 | Vérification de la procédure de mise à jour des sites. | ||
| 11 | 09-Feb-00 | examens de M. Reicherts... | ||
| 12 | 22-Mar-00 | |||
| 13 | 29-Mar-00 | support de texte linéaire "MEMOIRE ET ORGANISATION" au format Word et figures | ||
| 14 | 05-Apr-00 | interfaces homme-machine, exemples d'interactivité, newsgroups | ||
| 15 | 12-Apr-00 | concepts de navigation linéaire vs. hypertexte, cartes du site, structures, iterative prototyping, iterative testing 5 users (J.Nielsen), task analysis, user requirements... |
PARTICIPANTS SH 1999/00:
borghi |
angela |
http://www-student.unifr.ch/e-97/borghian/pub/ | |||
campello |
cinzia |
http://www-student.unifr.ch/e-97/campellc/pub/ | |||
clerc |
joelle |
http://www-student.unifr.ch/e-96/clercj/pub/ | |||
diferro |
cinzia |
http://www-student.unifr.ch/e-97/ferroc/pub/ | |||
ghattas |
leila |
http://www-student.unifr.ch/e-98/ghattasl/pub/ | |||
haefliger |
marie-paule |
http://www-student.unifr.ch/e-95/haefligm/pub/ | |||
medzihradska |
silvia |
http://www-student.unifr.ch/e-94/medzihra/pub/ | |||
nguyen |
lylan |
http://www-student.unifr.ch/e-95/nguyenly/pub/ | |||
recabarren |
romina |
http://www-student.unifr.ch/e-99/recabarr/pub/ | |||
regazzi |
martino |
http://www-student.unifr.ch/e-97/regazzim/pub/ | |||
staeuble |
nicole |
http://www-student.unifr.ch/e-96/staeuble/pub/ | |||
tissot |
jacques |
http://www-student.unifr.ch/e-96/tissotja/pub/ | |||
uffholz |
patrick |
http://www-student.unifr.ch/e-77/uffholzp/pub/ | |||
yerly |
sylvie |
http://www-student.unifr.ch/e-97/yerlys/pub/ | |||
Test de familiarité à l'ordinateur / internet:
hypertext also called HYPERLINKING, the linking of related pieces of information by electronic connections in order to allow a user easy access between them. Hypertext is a feature of some computer programs that allow the user of electronic media to select a word from text and receive additional information pertaining to that word, such as a definition or related references within the text. In the article "whale" in an electronic encyclopedia, for example, a hypertext link at the mention of the blue whale enables the reader to access the article on that species merely by "clicking" on the words "blue whale" with a mouse. The hypertext link is usually denoted by highlighting the relevant word or phrase in text with a different font or colour. Hypertext links can also connect text with pictures, sounds, or animated sequences. Hypertext links between different parts of a document or between different documents create a branching or network structure that can accommodate direct, unmediated jumps to pieces of related information. The treelike structure of hyperlinked information contrasts with the linear structure of a print encyclopaedia or dictionary, for example, whose contents can be physically accessed only by means of a static, linear sequence of entries in alphabetical order. Hypertext links are, in a sense, text cross-references that afford instant access to their target pieces of information. Such links are most effective when used on a large array of information that is organized into many smaller, related pieces and when the user requires only a small portion of information at any one time. Hypertext has been used most successfully by the interactive multimedia computer systems that came into commercial use in the early 1990s.
ISBN 08082-22823-66737